React Redux (with hook)
🏬

React Redux (with hook)

Property
FrontEnd
Year
2022
Author
Tweet
🍭
Redux 是一个状态管理工具
本文先介绍 react react-redux 基础的用法,不涉及封装好的 reduxjs/toolkit、

1. redux 的数据流向

notion image
这是一个最基本的数据流向
  • UI:也可指view
  • Store:全局唯一存在的存储 state 的地方,用来保存公共的数据
  • action:view发生变化时,会用 action 发出通知,action 是改变 state 的唯一方法
  • action-creator:是一个方法,用来返回 action 对象
  • reducer:用来接收 action 后,根据 type 来判断对 state 进行修改
  • dispatch:是发送 action 的唯一方法
基本的流向就是
  1. 全局存在一个 store,存储着 state
  1. view 发生变化时,会发出 action,这个 action 通过 storedispatch 方法发送给 reducerreducer 根据 actiontype 作出对应处理来更新 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 是一个纯函数,接收 stateaction 作为参数,并返回一个新的 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

需要通过 dispatchaction 传给 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;
这样一个基本的流程就完成了

3. 处理异步的 action