react + redux 状态管理操作

news2024/11/15 14:07:57

1 概念

Redux 是一个全局状态管理的 JS 库
在这里插入图片描述

2 Redux 安装

在react中使用redux，官方要求安装两个其他插件：Redux Toolkit 和 react-redux

Redux Toolkit：官方推荐编写redux逻辑的方式，简化书写方式
react-redux：用来连接 redux 和 react 组件的中间件

通过命令：

npm i @reduxjs/toolkit react-redux

3 创建子模块并导入

创建如下目录结构
在这里插入图片描述

counterStore.js 代码如下：

import { createSlice } from "@reduxjs/toolkit";

const counterStore = createSlice({
    name: 'counter',
    // 初始化state
    initialState: {
        count: 0
    },
    // 修改状态的方法 （同步方法）
    reducers: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        }
    }
})

// 解构出来action函数
const { increment, decrement } = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer

// 导出actions
export { increment, decrement }
// 默认导出reducer
export default reducer

其中，我们定义了数据：count
以及两个 action：increment / decrement，后续会通过 dispatch 来触发 action 修改数据

react 只有一种方式能够修改数据，就是 action，我们需要用 dispatch 提交 action，来修改数据

然后再将子模块 counterStore.js 引入
index.js 代码如下：

import { configureStore } from '@reduxjs/toolkit'
import counter from './modules/counterStore'

// 导入子模块reducer
export default configureStore({
  reducer: {
    counter
  }
})

4 中间件为 react 注入 store

react-redux 负责把 react 和 redux 连接起来，内置 Provider 组件通过 store 参数把创建好的 store 实例注入到应用中，连接正式建立
通过导入 store 和 Provider 后
使用 Provider 将 App 包裹起来

import store from "./store";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

5 在组件中使用 store 数据

需要用到一个钩子函数 useSelector()，他的作用是把 store 的数据映射到组件中

import './App.css';
import { useSelector } from "react-redux";

function App() {
  // 获得 count 数据
  const { count } = useSelector(state => state.counter)
  return (
    <div className="App">
      {count}
    </div>
  );
}

export default App;

使用 {count} 语法，界面中会展示 count 初始值

6 修改 store 数据

需要另外一个 hook 函数 userDispatch，它的作用是生成提交 action 对象的 dispatch 函数
在这里插入图片描述

react 只有一种方式能够修改数据，就是 action，我们需要用 dispatch 提交 action，来修改数据

import './App.css';
import { useDispatch, useSelector } from "react-redux";
// 导入action 
import { increment, decrement } from './store/modules/counterStore.js'

function App() {
  // 获得 count 数据
  const { count } = useSelector(state => state.counter)
  // 通过 dispatch 提交action 修改数据
  const dispatch = useDispatch()

  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

export default App;

7 提交 action 传参

在调用 action 时，参数会被传递到 action 对象的 payload 属性上
在这里插入图片描述

import './App.css';
import { useDispatch, useSelector } from "react-redux";
// 导入action 
import { increment, decrement, addToNum } from './store/modules/counterStore.js'

function App() {
  // 获得 count 数据
  const { count } = useSelector(state => state.counter)
  // dispatch 提交action 修改数据
  const dispatch = useDispatch()

  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(addToNum(10))}>+10</button>
    </div>
  );
}

export default App;

import { createSlice } from "@reduxjs/toolkit";

const counterStore = createSlice({
    name: 'counter',
    // 初始化state
    initialState: {
        count: 0
    },
    // 修改状态的方法 （同步方法）
    reducers: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        },
        addToNum(state, action) {
            state.count += action.payload
        }
    }
})

// 解构出来action函数
const { increment, decrement, addToNum } = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer

// 导出actions
export { increment, decrement, addToNum }
// 默认导出reducer
export default reducer

8 异步状态操作

创建 store 的 state 和 action 不变
在子模块中单独封装一个函数，新函数中异步请求拿到数据，并使用 dispatch 触发 action

创建新的 store 模块
store/modules/channelStore.js 代码如下：

import { createSlice } from "@reduxjs/toolkit";

const channelStore = createSlice({
    name: 'channel',
    // 初始化state
    initialState: {
        channel: [{id: 50}, {id: 100}]
    },
    // 修改状态的方法 （同步方法）
    reducers: {
        setChannels(state, action) {
            state.channel = action.payload
        }
    }
})

// 解构出来action函数
const { setChannels } = channelStore.actions
// 获取reducer
const reducer = channelStore.reducer

// 异步请求
const fetchChannList = () => {
    return async (dispatch) => {
        setTimeout(() => {
            dispatch(setChannels([{id: 50}, {id: 100}, {id: 150}, {id: 200}]))
        })  // 模拟产生异步请求
        console.log('aaa')
    }
}

// 导出异步方法
export { fetchChannList }
// 默认导出reducer
export default reducer

App.js 代码如下：

import './App.css';
import { useEffect } from 'react';
import { useDispatch, useSelector } from "react-redux";
// 导入action 
import { increment, decrement, addToNum } from './store/modules/counterStore.js'

import { fetchChannList } from './store/modules/channelStore.js'

function App() {
  // 获得 state 数据
  const { count } = useSelector(state => state.counter)
  const { channel } = useSelector(state => state.channel)

  // dispatch 提交action 修改数据
  const dispatch = useDispatch()

  // 使用useEffect触发异步请求
  useEffect(() => {
    dispatch(fetchChannList())
  }, [dispatch])

  return (
    <div className="App">
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(addToNum(10))}>+10</button>

      <ul>
        {channel.map(item => <li key={item.id}>{item.id}</li>)}
      </ul>
    </div>
  );
}

export default App;