react-redux以及redux状态管理工具详解

1、react-redux使用及原理

1、下载 react-redux redux redux-thunk三个依赖包

yarn add react-redux  redux  redux-thunk

2、配置store对象，用来管理全局状态

import {
    createStore, combineReducers, applyMiddleware } from "redux"

// redux-thunk中间件，用来处理异步传值的方法
import reduxThunk from "redux-thunk"

import Reducer1 from "./reducer/Reducer1"
import Reducer2 from "./reducer/Reducer2"
import Reducer3 from "./reducer/Reducer3"

// combineReducers方法用来合并reducer,将reducer分开，便于管理
const reducer = combineReducers({
   
    Reducer1,
    Reducer2,
    Reducer3,
})

// 创建store对象，并将其暴露出去
const store = createStore( reducer, applyMiddleware(reduxThunk) )

export default store

3、创建reducer.js文件， reducer文件主要是用来处理改变store状态里面的值

const reducer1 = (prevState = {
     num: 10 }, action) => {
   
    let newState = {
    ...prevState }
    switch(action.type) {
   
        case "TYPE1":
            newState.num = action.value
            return newState
        default:
            return prevState
    }
}

export default reducer1

4、在入口文件index.js中引入provider，并包裹在App根组件外，其中的store就是创建的store对象

import {
    Provider } from "react-redux"

import store from "./studyReactRedux/reactRedux/index";

root.render(
    <Provider store = {
    store }>
        <App></App>
    </Provider>
)

至此在react所有的组件中都有了store对象，方便存取全局状态了

接下来就是在组件中存值取值了

1、在组件中取值

  <div> {
   props.num} </div>


  const matStateToProps = (state) => {
   
        return {
   
             num: state.Reducer1.num
        }
   }
  export default connect(matStateToProps, mapDispatchToProps)(Home)

2、组件中存值（同步）

const handleClick = (val) => {
   
	props.changeVal(val)
}

<button onClick={
    () => handleClick('同步传过去的值') }>同步存值</button>

const mapDispatchToProps = {
   
    changeVal(val) {
   
         return {
   
              type: 'TYPE1',
              value: val
          }
    }
}
export default connect(matStateToProps, mapDispatchToProps)(Home)