react中使用@reduxjs/toolkit的详细教学，加紧学起来

由于redux-thunk在ts中使用复杂性提高，并且在创建store时过多的繁琐的中间件注册，建议使用@reduxjs/toolkit代替
以下是一个基本的React应用程序，使用@reduxjs/toolkit来管理状态：

import React from 'react';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 }
  }
});

const store = configureStore({
  reducer: counterSlice.reducer
});

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

  return (
    <div>
      <button onClick={() => dispatch(counterSlice.actions.increment())}>+</button>
      <span>{counter}</span>
      <button onClick={() => dispatch(counterSlice.actions.decrement())}>-</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

• 该应用程序有一个计数器组件，它显示一个数字和两个按钮。当用户单击“+”按钮时，计数器的值会增加1。
• 当用户单击“-”按钮时，计数器的值会降低1。计数器的值存储在Redux状态树中，并且由@reduxjs/toolkit自动生成的reducer函数管理。
• 在上面的代码中，首先我们使用createSlice函数定义了一个名为“counter”的Slice，它包含一个名为“value”的状态属性，以及两个reducer：increment和decrement。
• 接下来我们使用configureStore函数创建了一个store，它将reducer设置为CounterSlice.reducer。
• 最后，我们通过Provider组件将store传递给我们的React应用程序，并在Counter组件中使用useSelector和useDispatch两个hook访问和修改我们的状态。
• @reduxjs/toolkit为我们提供了一些基本的构件块，使得编写Redux代码的过程更加容易快捷。例如，createSlice函数将我们从手动编写actioncreators和reducers中解放出来。
• configureStore函数为我们提供了一个具有中间件支持的预配置Redux store实例，这使得对Redux store进行高级配置变得更加容易。
• 与此同时，useSelector和useDispatch hook让我们能够轻松地在React组件中访问和修改状态，从而简化了应用程序的开发和维护。
• 总的来说，@reduxjs/toolkit已经成为了React开发者的首选库之一，它提供了丰富的功能，让我们能够更容易地编写可维护的状态管理代码。如果您正在编写React应用程序并且考虑使用Redux来管理状态，强烈建议您尝试使用@reduxjs/toolkit。