React Redux (with hook)

🍭

Redux 是一个状态管理工具

本文先介绍 react react-redux 基础的用法，不涉及封装好的 reduxjs/toolkit、

1. redux 的数据流向

这是一个最基本的数据流向

UI：也可指view

Store：全局唯一存在的存储 state 的地方，用来保存公共的数据

action：view发生变化时，会用 action 发出通知，action 是改变 state 的唯一方法

action-creator：是一个方法，用来返回 action 对象

reducer：用来接收 action 后，根据 type 来判断对 state 进行修改

dispatch：是发送 action 的唯一方法

基本的流向就是

全局存在一个 store，存储着 state

当 view 发生变化时，会发出 action，这个 action 通过 store 的 dispatch 方法发送给 reducer，reducer 根据 action 的 type 作出对应处理来更新 state

2. 代码演示

通过 npx create-react-app react-with-redux 脚手架工具创建一个 react 应用，注意先不要使用官方 template 来直接创建 redux。因为官方用的是 @reduxjs/toolkit，有一些 api是不一样的

1. 安装依赖


npm install redux react-redux

2. 创建全局的 `store`


// store.js
import { createStore} from 'redux'
import reducer from "./reducer";

const store = createStore(reducer, {account: 1}, applyMiddleware(thunk));

export default store;

createStore 接收三个参数

reducer

预加载的 state 的初始值

中间件等

3. `action`

action 是一个对象，必须有一个 type 属性，其他属性不做限制


{ type: 'plus', payload: amount } // 是增加数字的一个action
{ type: 'reduce', payload: amount } // 是减少数字的一个action

4. `action creator`

action creator 是一个方法，只能返回一个对象（如果有中间件可以返回一个函数）


export const plusMoney = (amount) => {
  return { type: 'plus', payload: amount }
}

export const reduceMoney = (amount) => {
  return { type: 'reduce', payload: amount }
}

5. `reducer`

reducer 是一个纯函数，接收 state 和 action 作为参数，并返回一个新的 state


// state = null, 默认值
const accountReducer = (state = null, action) => {
  switch (action.type) {
    case 'plus':
      return state + action.payload;
    case 'reduce':
      return state - action.payload;
    default:
      return state;
  }
};

export default accountReducer;

项目中那个肯定有多个 reducer，将它们合并成一个，可以使用 combineReducers ，


import { combineReducers } from 'redux'
import accountReducer from "./account/accountReducer";

const reducer = combineReducers({ account: accountReducer })
// 注：这个 account 这个 对象中的 key 就是 state 的 key

export default reducer;

6. `dispatch`

需要通过 dispatch 将 action 传给 reducer


import './App.css';
import { useSelector, useDispatch } from "react-redux";
import { bindActionCreators } from "redux";
// 将多个 action creator 统一到一起
import actionCreators from './store/actions'

function App() {
  const state = useSelector((state) => state);
  
  const dispatch = useDispatch()
  const { plusMoney, reduceMoney } = bindActionCreators(actionCreators, dispatch)
  return (
    <div className="App">
      <span>{state.account}</span>
      <button onClick={() => plusMoney(1000)}>plus</button>
      <button onClick={() => reduceMoney(1000)}>reduce</button>
    </div>
  );
}

export default App;

这样一个基本的流程就完成了

React Redux (with hook)

1. redux 的数据流向

2. 代码演示

1. 安装依赖

2. 创建全局的 store

3. action

4. action creator

5. reducer

6. dispatch

3. 处理异步的 action

2. 创建全局的 `store`

3. `action`

4. `action creator`

5. `reducer`

6. `dispatch`