由于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。