redux 的 toolkit使用教程和demo

React 的 redux-toolkit 是一个简化 Redux 开发的工具包,它提供了一系列的简化方法来处理常见的 Redux 模式。下面我将指导你如何使用 redux-toolkit 创建一个简单的计数器应用。

第一步:安装依赖

首先你需要确保你的项目中已经安装了 react, react-dom, @reduxjs/toolkit, 和 react-redux。你可以通过以下命令来安装它们(如果你还没有创建项目的话,可以先用 create-react-app 快速创建一个项目):

npx create-react-app my-app
cd my-app
npm install @reduxjs/toolkit react-redux

第二步:创建计数器 Slice

接下来我们需要创建一个计数器功能的 slice。在 src 文件夹下创建一个名为 features/counter/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 -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

这个 slice 定义了一个计数器的状态,并提供了三个不同的 actions 来修改计数器的值。

第三步:设置 store

src 目录下创建或编辑 store.js 文件,配置 Redux store 并引入刚刚创建的 counterSlice:

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

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

第四步:设置 Provider

确保在应用程序的根组件中包装 组件以使 React 组件能够访问 Redux store。编辑 src/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(
  
    
      
    
  ,
  document.getElementById('root')
);

第五步:创建计数器组件

现在我们需要创建一个 React 组件来展示计数器并允许用户增加或减少计数值。编辑 src/App.js 文件:

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

function App() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    

Count: {count}

setCustomIncrement(e.target.value)} />
); } // 追加状态管理逻辑 let customIncrement = 0; const setCustomIncrement = (value) => { customIncrement = parseInt(value, 10); }; export default App;

第六步:运行应用

保存所有更改后,返回到终端并运行你的应用:

npm start

现在你应该能看到一个简单的计数器应用运行在本地服务器上,可以通过点击按钮来增加或减少计数器的值。这只是一个基本示例,实际应用中你可能会有更复杂的 state 和更丰富的 UI。希望这个示例对你有所帮助!

你可能感兴趣的:(前端面试题,React,react.js,javascript,前端)