Redux 状态管理库

一、是什么

Redux 是 React 的一个状态管理库，它基于 flux。 Redux 简化了React中的单向数据流。 Redux 将状态管理完全从React中抽象出来。

二、工作原理

redux 要求我们把数据都放在 store 公共存储空间

一个组件改变了 store 里的数据内容，其他组件就能感知到 store的变化，再来取数据，从而间接的实现了这些数据传递的功能

工作流程图如下所示：

在React中，组件连接到 redux ，如果要访问 redux，需要派出一个包含 id和负载(payload) 的 action。action 中的 payload 是可选的，action 将其转发给 Reducer。

当reducer收到action时，通过 swithc...case 语法比较 action 中type。匹配时，更新对应的内容返回新的 state。

当Redux状态更改时，连接到Redux的组件将接收新的状态作为props。当组件接收到这些props时，它将进入更新阶段并重新渲染 UI。

Redux 循环细节

Action: Action 只是一个简单的json对象，type 和有payload作为键。type 是必须要有的，payload是可选的。

Action Creators：这些是创建Actions的函数，因此我们在派发action时不必在组件中手动编写每个 action。

Reducers：Reducers 是纯函数，它将 action和当前 state 作为参数,计算必要的逻辑并返回一个新的state。这些 Reducers 没有任何副作用。它不会改变 state 而是总是返回 state 。

// Action
{ 
  type:"SEND_EMAIL", 
  payload: data
}

// Action Creators
export function sendEamil(data) {
  return { type:"SEND_EMAIL", payload: data};
}

// Reducers
export default function emailReducer(state = [], action){
  switch(action.type) {
    case "SEND_EMAIL":  
      return {
        ...state,
        email: action.payload
      };
    default: return state;
  }
}

三、如何使用

创建一个store的公共数据区域
还需要创建一个记录本去辅助管理数据，也就是reduecer，本质就是一个函数，接收两个参数state，action，返回state
然后就可以将记录本传递给store，两者建立连接。
如果想要获取store里面的数据，则通过store.getState()来获取当前state
更改store里面数据，是通过dispatch来派发action，通常action中都会有type属性，也可以携带其他的数据
这样派发action之后，既可以通过store.subscribe监听store的变化

在React项目中，会搭配react-redux进行使用。完整代码如下：

import { createStore } from 'redux'

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// 创建一个 store。API: { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// 可以在 subscribe() 里，更新 UI
store.subscribe(() => console.log(store.getState()))

// 派发 action
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

小结

createStore 可以帮助创建 store
store.dispatch 帮助派发 action , action 会传递给 store
store.getState 这个方法可以帮助获取 store 里边所有的数据内容
store.subscrible 方法订阅 store 的改变，只要 store 发生改变， store.subscrible 这个函数接收的这个回调函数就会被执行

参考文献

https://cn.redux.js.org/docs/introduction/open in new window
https://www.redux.org.cn/docs/basics/Actions.htmlopen in new window
https://lulujianglab.com/posts/open in new window大白话解析 Redux 、 redux-thunk 、redux-saga 和 react-redux

# Redux 状态管理库

# 一、是什么

# 二、工作原理

# Redux 循环细节

# 三、如何使用

# 小结