|
Redux toolkit 取代了原先的 redux 【其实原先的并没有废除 ,但是研发人员觉得太复杂 背离初衷 ,所以有了新的 redux toolkit】
Redux toolkit 主要以 createSlice 创建切片,然后 在 store.js 引入切片 为主的 工作模式; 就是把以前的 action、redux 等折合成一个
使用方法:
1. 利用 createSlice 创造切片
import { createSlice ,createAsyncThunk } from '@reduxjs/toolkit';
export const moverSlice = createSlice({
name: 'mover',
initialState: {
value: 0,
name:'王五',
age:18,
newTypeList:[]
},
reducers: {
moveto: (state, {payload}) =>{ // 注意写法 要加这个{}
state.name = payload.sty; // 上面方法的简写 可以直接穿payload
},
},
})
export const { moveto} = moverSlice.actions;
export default moverSlice.reducer;
2. 写入 store
import { configureStore } from '@reduxjs/toolkit' ;
import counterReducer from './counterSlice';
import moverReducer from './moveSlice';
export default configureStore({
reducer: {
counter: counterReducer,
mover:moverReducer
}
})
3. 在APP.js 中引入store 和 Provider, 并且 使用Provider 包裹 住APP的所有内容
import store from './newredux/store'; // 引入新的 redux
import { Provider } from 'react-redux';
render(){
return (
<Provider store={store}>
<>
主页
</>
</Provider>
)
}
4. 在 testStore 【注意 这里必须是个函数类】 中使用
import { useSelector, useDispatch } from 'react-redux';
import { moveto ,loadNewsTypeData} from "../../newredux/moveSlice";
export default function TestStore() {
const name2 = useSelector(state => state.mover.name)
const dispatch = useDispatch();
return (
<div>
<button onClick={()=>dispatch(moveto({sty:'黄三'}))}> </button>
<p> {name2} {age2} </p>
</div>
)
}
|
|