redux,react-redux，redux-toolkit总结

redux

redux是什么

0. redux是一个专门做状态管理的JS库。
1. redux常用于react项目中，与react配合使用。
2. redux主要用于集中式管理redux应用中多个组件共享的状态，它会将应用状态存储到到一个地方，称为store。
3. redux可以让某个组件的状态让其他组件可以随时拿到。
4. redux可以轻松地实现在一个组件中改变另一个组件的状态。

redux的核心概念

action

0. 动作的对象。
1. action包含两个属性：type:标识属性，值为字符串；data:数据属性，值任意。
2. action例子：{type:'increment',data:7}.

reducer

0. 初始化状态。
1. 加工状态，action发出命令后将state放入reucer加工函数中，对state进行加工处理，返回新的state。

store

0. store 可以理解为有多个加工机器的总工厂
1. 提供subscribe，dispatch，getState这些方法。

redux工作流程

0. 组件借助store分发action对象（store.dispatch(））。
1. reducer接收action对象及状态。
2. reducer处理action对象，返回新的state。
3. 组件通过store.getState()接收状态。
4. 通过store.subscribe（）检测状态，并做出重新渲染的动作。

redux工作流程图

combineReducers

如果redux有多个状态,即有多个reducer，则需要使用combineReducers汇总所有的reducer变为一个总的reducer。

const allReducer=combineReducers({
 he:countReducer,
 peoples:personReducer
})

之后需要获取状态时需要利用属性名获取。

store.getState().属性名

而改变状态则正常通过store.dispatch(）改变状态，不需要额外操作。如果不同的reducer接受到一个相同type的action对象，则都会改变状态。

redux异步action

本质是一个函数，redux默认处理不了异步action。

下载redux-thunk包，redux-thunk主要作用是识别传入的参数，如果是函数则调用此函数，并传入store.dispatch函数参数，如果不是函数，则执行store.dispatch()。

在store中引入这个包，并在createStore (reducer, applyMiddleware( thunk ))中写入。

react-redux

如果将 Redux 与任何类型的 UI 框架一起使用，通常会使用“UI 绑定”库将 Redux 与 UI 框架绑定在一起，而不是直接从 UI 代码与 store 交互。React Redux 是 React 的官方 Redux UI 绑定库。

• React Redux 将组件区分为 容器组件 和 UI 组件，容器组件包裹UI组件。
• 容器组件通过props传给UI组件redux中保存的状态和操作状态的方法。

react-redux的核心概念

react-redux原理图

Provider

我们一般将顶层组件包裹在Provider组件之中，因为这样组件就都可以在react-redux的控制之下了,store作为参数放到Provider组件中去，这样所有的组件都能到使用store了，都能够访问到Redux中的数据。

connect

connect创建一个容器组件，用于连接UI组件和redux。

connect(mapStateToProps, mapDispatchToProps)(UIComponent)

mapStateToProps

mapStateToProps是一个函数，它接收整个存储状态，并应返回该组件所需的数据对象。

const mapStateToProps=state=>({count:state});//返回了count数据

mapDispatchToProps

mapDispatchToProps是一个函数或者一个对象，主要作用是映射操作状态的方法。

function mapDispatchToProps(){
    return {jia:(console.log(1))};//返回了jia方法。
}
简写方式：
{
jia:createAction,//createAction是创建action对象的函数。会自动调用store.dispatch()。
}

combineReducers

和上述redux中的用法一致。

redux-toolkit

它最初的创建是为了帮助解决关于 Redux 的三个常见问题：

• 配置 Redux 存储太复杂了
• 必须添加很多包才能让 Redux 做任何有用的事情
• Redux 需要太多样板代码

使用步骤：

• 创建一个 Redux 存储configureStore

  • configureStore接受一个reducer函数作为命名参数
  • configureStore使用良好的默认设置自动设置商店

  import { configureStore } from '@reduxjs/toolkit'
  ​
  export const store = configureStore({
    reducer: {},
  })
  

• 为 React 应用程序组件提供 Redux 存储

  • 在你的周围放置一个 React-Redux<Provider>组件<App />
  • 将 Redux 存储作为<Provider store={store}>

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  )
  

• 创建一个 Redux “切片”减速器createSlice

  • createSlice使用字符串名称、初始状态和命名的 reducer 函数调用
  • Reducer 函数可以使用 Immer 来“改变”状态
  • 导出生成的 slice reducer 和 action creators

  import { createSlice } from '@reduxjs/toolkit'
  ​
  const initialState = {
    value: 0,
  }
  ​
  export const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
      increment: (state) => {
        state.value += 1
      },
      decrement: (state) => {
        state.value -= 1
      },
      incrementByAmount: (state, action) => {
        state.value += action.payload
      },
    },
  })
  ​
  export const { increment, decrement, incrementByAmount } = counterSlice.actions
  ​
  export default counterSlice.reducer
  

• 在 React 组件中使用 React-ReduxuseSelector/useDispatch钩子

  • useSelector使用钩子从存储中读取数据
  • 使用钩子获取dispatch函数useDispatch，并根据需要调度操作

  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()