需要将所有reducer 都引入到rootReducer
import {
Provider } from "react-redux";
import store from "./reducers";
const render = () => {
const App = require("./App").default;
ReactDOM.render(
<Provider store={
store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
};
import {
configureStore, combineReducers, Reducer } from '@reduxjs/toolkit';
import rootReducer, {
staticReducers } from './rootReducer';
//用户信息状态
// store conf
const store = configureStore({
reducer: rootReducer,
devTools: process.env.NODE_ENV !== 'production',
});
// 暴露一个函数 给外面懒加载 组件注入
export function injectReducer<State>(key: string, reducer: Reducer<State>) {
asyncReducers[key] = reducer;
const newRootReducer = combineReducers({
...staticReducers,
...asyncReducers,
});
store.replaceReducer(newRootReducer);
}
// 普通 dispatch
export type AppDispatch = typeof store.dispatch;
// 每当我们需要访问 Redux 存储状态时(mapState 函数 | useSelector 选择器)
export type RootState = ReturnType<typeof rootReducer>;
// thunk type
// export type AppThunk = ThunkAction>;
export default store;
configureStore()
combineReducers()
createSlice()
createAsyncThunk()
使用步骤
import {
Provider } from 'react-redux'
import store from './reducers'
<Provider store={
store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>
import {
configureStore, combineReducers } from '@reduxjs/toolkit'
inport demo from './demo'
const rootReducer = combineReducers({
demo })
const store = configureStore({
reducer : rootReducer })
export type RootState = ReturnType<typeof rootReducer>;
export default store;
import {
createSlice, createAsyncThunk } from '@reduxjs/toolkit'
const initialState={
str1 : '',
str2 : ''
};
export const setData = createAsyncThunk (
'qwe/setData',
()=>{
return 'we'
}
)
const b = createSlice({
name :'asd',
initialState,
reducers:{
},
extraReducers:(bui)=>{
bui.addCase(setData.pending, (state)=>{
state.str1 = '1'
});
bui.addCase(setData.fulfilled, (state,action)=>{
console.log(action,'------')
state.str1 = action.payload || ''
});
bui.addCase(setData.rejected, (state)=>{
state.str1 = '3'
});
}
})
export default b.reducer;
// export const bActions = b.actions; // 暂时还没理解用处
四、 组件中使用
i
import './App.css';
// import { getUserInfo } from './reducers/userInfo';
import {
setData } from './reducers/demo';
import {
RootState } from './reducers';
function App() {
const dispatch = useDispatch();
const a = useSelector((state : RootState )=> state.demo.str1)
useEffect(()=>{
dispatch(setData())
},[dispatch]);
return (
<div className="App">
{
a}
</div>
);
}
export default App;
文档地址 : https://redux-toolkit.js.org/