react-redux简单使用

原创已于 2022-07-29 15:55:41 修改 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-redux

于 2022-07-29 14:21:28 首次发布

react 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何在React应用中使用Redux进行状态管理。首先创建了store文件夹，包含index.jsx和reducer.jsx，其中reducer定义了默认状态和处理状态变更的逻辑。然后在index.jsx中导入createStore并创建store实例。在index.js中，使用Provider组件将store注入到应用中。最后，通过connect函数将App组件与Redux连接，实现组件与store的交互，允许修改和显示状态。

1.创建store文件夹，文件夹下创建index.jsx和reducer.jsx

reducer.jsx

//定义一个默认状态
const defaultState = {
    msg: "你好，世界"
}

//导出一个函数
// eslint-disable-next-line import/no-anonymous-default-export
export default (state = defaultState, action) => {
    let newState = JSON.parse(JSON.stringify(state))//使用深拷贝，不然数据不变化
    switch (action.type) {
        case 'changeValue':
            newState.msg = action.data;
            break
        default:
            break
    }
    return newState
}

index.jsx

import { legacy_createStore as createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer)
export default store

2.index.js中使用Provider包裹并加入store

3.使用connect，连接redux父容器与子容器

import React, { Fragment } from 'react'
import { connect } from 'react-redux'

function App(props) {
  return (
    <Fragment>
      <div>
        {props.msg}
      </div>
      <button onClick={() => props.changeValue('hello')}>修改显示</button>
    </Fragment>
  )
}

const mapStateToProps = (state) => {
  return {
    msg: state.msg
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    changeValue(msg) {
      const action = { type: 'changeValue', data: msg }
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)