React Js 中创建和使用 Redux Store

Jimmy_is_jimmy

发布于 2023-08-11 16:27:20

2300

发布于 2023-08-11 16:27:20

文章被收录于专栏：call_me_Rcall_me_R

本文，我们将学习在 React 应用中怎么创建 Redux Store。同时，我们将分享怎么使用 Redux store 去管理复杂的 states。

此外，我们将学习使用 toolkit module 来创建一个 slice state。

Redux 是一个很受欢迎且开源的 JavaScript 库，用来管理应用的状态。

Redux 为 React 赋能，并允许你创建用户界面。React Redux 是 React 官方为 Redux 绑定使用的。

Redux 提供了一个存储，我们可以使用 Provider 组件将其集成到 React 中。它允许你从 Redux Store 中读取数据并将 Actions 分发到 Store 中以更新状态。

创建 React 应用

打开控制台，输入下面的命令行，来安装 create-react-app 工具：

npm install create-react-app --global

现在，我们需要执行给定的命令行以创建一个新的 react 应用。

npx create-react-app react-demo

然后，进入该项目：

cd react-demo

安装 React Redux Module

为了创建一个 redux store，我们将同时安装 react-redux 和 redux toolkit。

npm install react-redux @reduxjs/toolkit

使用 Redux Provider 包裹应用

React Redux 提供了一个 Provider 组件。它在 React 应用程序中增加了 Redux store，并允许该 store 在整个 React 应用中可用。

我们导入 redux store 组件，然后添加到 Provider 组件中。

在 src/index.js 文件中添加下面的代码：

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

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

创建 Redux Store

在 src 目录中，我们创建名为 store 文件夹，然后创建一个名为 index.js 文件。

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

export default configureStore({
  reducer: {
    counter: ,
  },
});

configureStore()：包装 createStore 以提供简化的配置选项和良好的默认值。

它会自动添加或者组合你的 slice reducers，并且添加你提供的任何 Redux 中间件。它默认包含 redux-thunk 并允许使用 Redux DevTools 扩展。

创建 Redux State Slice Reducer

接着，创建 reducers/ 文件夹，然后创建名为 counterSlice.js 文件并添加给定的代码：

import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value = state.value - 1
    },
  },
})
export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

**createSlice()**：接收一个包含 reducer 函数、slice 名称和初始状态值的 state 对象，并且自动生成相应的 action 类型的 slice reducer。

在 Store 中注册 State Slice

在这一步中，我们将添加 slice reducer 到 counter 属性中。在 store/index.js 文件中插入该代码。

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../reducers/counterSlice'
export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

在 React 组件中使用 Redux State

打开 App.js 文件，然后添加下面的代码。在这个文件中，我们将向你展示如何在 React 组件中使用 React Redux store。

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './reducers/counterSlice'
function App() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()
  return (
    <div className="App container mt-5 text-center">
      <h2 className="mb-3">React Js Redux Store with Slice State Examle</h2>
      <p className="h1">{count}</p>
      <button
        onClick={() => {
          dispatch(increment())
        }}
        className="me-2 btn btn-primary"
      >
        Increment
      </button>
      <button
        onClick={() => {
          dispatch(decrement())
        }}
        className="me-2 btn btn-danger"
      >
        Decrement
      </button>
    </div>
  )
}
export default App