React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > Redux Toolkit 状态管理

React 中使用 Redux Toolkit 状态管理的实践

作者：自信的飞

本文主要介绍了Redux的核心概念及Redux Toolkit的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Redux的核心概念

Redux的核心概念包括Store、Action、Reducer、State和Dispatch。

在现代 React 应用程序中，状态管理是一个至关重要的部分。使用 Redux Toolkit 可以简化 Redux 的配置和管理。本文将通过三个文件的示例，详细讲解如何使用 Redux Toolkit 创建和管理一个简单的计数器状态，并通过类比源 store 和根 store 的概念，加以更好地理解。

一、什么是源 Store 和根 Store？

这里只是自己觉得这样定义会更好理解一些,实际并没有这样的概念

源 Store

源 store 是模块化的状态管理单元，负责特定功能的状态和操作。使用 createSlice 创建的 slice 就是源 store。

类比：可以想象成一个专注于特定产品的车间，例如一个玩具制造车间。它只负责制造特定类型的玩具（如计数器的状态管理），并且有自己的一套操作流程（增、减、重置）。

根 Store

根 store 是整个应用的状态管理中心，使用 configureStore 组合多个源 store。它负责将所有的状态和逻辑集中起来，提供给整个应用使用。

类比：可以想象成一个大型工厂，里面有多个车间（源 store）。有负责制造玩具的,有负责制造家具的。。。这个工厂负责管理和协调各个车间的生产，并且能够根据需求调整生产线（即添加或修改源 store）。

二、创建 Counter Store

2.1 定义源 Store

在一个新的文件 counterSlice.js 中，我们将创建计数器的 slice：

//  store/modules/xxx.js

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

// 创建一个 slice
const counterSlice = createSlice({
  name: 'counter',  // 定义 slice 的名称
  initialState: {   // 初始化状态
    count: 0,       // 需要被全局维护的数据
  },
  reducers: {       // 定义修改状态的方法
    increment(state) {
      state.count += 1;  // 增加计数
    },
    decrement(state) {
      state.count -= 1;  // 减少计数
    },
    reset(state) {
      state.count = 0;    // 重置计数
    },
  },
});

// 导出 action 对象
export const { increment, decrement, reset } = counterSlice.actions;

// 导出 reducer 函数
export const counterReducer = counterSlice.reducer;

在这个例子中，counterSlice 就是我们的源 store，它初始化了一个 count 状态，并提供了三个 reducers 来修改这个状态。

三、组合 Store(根)

在另一个文件 store.js 中，我们将使用 configureStore 来组合根 store，并把 counterReducer 传入：

// store/index.js

import { configureStore } from '@reduxjs/toolkit';
import { counterReducer } from './counterSlice';

// 创建根 store
const store = configureStore({
  reducer: {
    counter: counterReducer,  // 将源 reducer 组合到根 store 中
  },
});

export default store;

这里，store 就是我们的根 store，它可以容纳多个源 store（在本例中只有 counter），并将它们组合在一起进行集中管理。

根store中可以定义多个源store，这里只示例一个

四、连接 React 和 Redux

我们目前只是使用了源store中的reducer函数来组合根store，还有定义导出的源store中的action对象并没有使用

现在我们已经定义了 store，但还需要将其链接到我们的 React 应用中。我们将使用 react-redux 中的 Provider 组件来实现这一点。

4.1 绑定 Store（为组件注入store）

在 index.js 或 App.js 中，我们将 Provider 组件包裹住我们的应用：

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

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

4.2 使用 Store 中的数据(调用触发)

在我们的组件中，使用 useSelector 钩子来访问 store 中的状态，并使用 useDispatch 钩子来触发 action。

// App.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';

const Counter = () => {
  const count = useSelector(state => state.counter.count);  // 获取状态
  const dispatch = useDispatch();  // 获取 dispatch 函数

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
};

export default Counter;

在这个组件中，我们通过 useSelector 获取 count 状态，并通过 useDispatch 触发 increment、decrement 和 reset 这三个 action。

总结

通过以上步骤，我们成功使用 Redux Toolkit 创建了一个简单的计数器应用。整个过程包括：

  1. 定义源 store（创建 slice）。
  2. 将源 store 组合到根 store 中。
  3. 通过 Provider 注入 store 到 React 应用中。
  4. 使用 useSelector 和 useDispatch 连接组件与 store，实现状态管理。

扩展:

1.action传参:

  1. 对源store的reducer中的action对象多传递一个action参数,这个参数就是我们触发方法传递的数据了
  2. 通过action.payload拿到数据
    addToNum(state, action) {
        state.count = action.payload
    }

调用触发

dispatch(addToNum(20))

2.异步操作获取数据

(1).在源store外面定义一个异步函数并暴露出去,异步函数中调用dispatch()

dispatch中传递源store中reducer中的action对象

// channelStore.js (源)

// 解构出action对象
const {setChannel} = channelStore.actions

// 封装函数
const fetchChannelList = ()=>{
    return async(dispatch) =>{
        const res = await.get(url) // url是请求后端的地址
        // setChannel是源store在reducer中定义的action对象
        dispatch(setChannel(res.data.channels))
    }
}

注意,因为给action对象传递参数了,所以参考上面的action传参,需要源store中的action对象多定义一个action形参来接收数据

// channelStore.js (源)

reducers:{
        setChannels(state,action){
        state.channelList = action.payload
    }
}

(2).在需要的地方调用:

// App.js

const dispatch = useDispatch()
useEffect(()=>{
    dispatch(fetchChannelList())
},[dispatch]

到此这篇关于React 中使用 Redux Toolkit 状态管理的文章就介绍到这了,更多相关 Redux Toolkit 状态管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:
阅读全文