React redux toolkit 新的redux
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>
<buttononClick={()=>dispatch(moveto({sty:'黄三'}))}> </button>
<p> {name2} {age2}</p>
</div>
)
}
本帖最后由 周大胖子 于 2022-8-2 11:38 编辑
切片间的调用触发 A切片某action操作时触发 B
1.在 B中 引入切片A 中的某一个action
import {tTytets2} from './counterSlice';
2. 在B中 的 一个隐藏属性extraReducers: 中添加 此方法[相当于监听]
export const moverSlice = createSlice({
name: 'mover',
initialState: {
value: 0,
name:'王五',
age:18,
newTypeList:[]
},
reducers: {
moveto: (state, {payload}) =>{ // 注意写法 要加这个{}
state.name = payload.sty;// 上面方法的简写 可以直接穿payload
},
},
// 可以额外触发别的 Slice改变
extraReducers:{
(state,payload){ // 这个state 是mover的state, 意思是当别的切片tTytets2 改变时，我们这里的state 跟着发生改变
state.age++;
state.name = '赵熊';
},
}
})
3.无其余抛出类 操作，就这样就可以 reduxjs/toolkit 中 异步的使用
1. 引入组件createAsyncThunk
import { createSlice ,createAsyncThunk } from '@reduxjs/toolkit';
// createAsyncThunk 创建一个异步的action此方法会有三个状态
// pending(进行中) fulfilled(成功) rejected(失败)
2. 发起网络请求 创建异步action 并抛出
const loadNewsType = ()=>fetch('http://guan.qancloud.com/getNewsType').then((res=>res.json()));
export const loadNewsTypeData = createAsyncThunk('move/load', async()=>{
const res = await loadNewsType();
return res;
} )
3. 监听
extraReducers:{
(state,{payload}){
state.newTypeList = payload.data;
}
}
4. 在 testStore中，引入使用
import { moveto ,loadNewsTypeData} from "../../newredux/moveSlice";
5. 在 函数组件的生命周期函数中 使用
useEffect(()=>{ // 注意这个周期函数的用法，第一个参数是执行参数，第二个参数 是代表 某些值若发生改变 则重新触发内部执行的参数
dispatch(loadNewsTypeData());
console.log('888',newTypeList)
},[])
页:
[1]