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>
                       <button  onClick={()=>dispatch(moveto({sty:'黄三'}))}> </button>
                       <p> {name2} {age2}  </p>
           </div>
        )
    }
   

周大胖子

  切片间的调用触发 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:{
    [tTytets2](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:{
    [loadNewsTypeData.fulfilled](state,{payload}){
      state.newTypeList = payload.data;
    }
  }




4. 在 testStore中  ，引入使用   

     import { moveto ,loadNewsTypeData} from "../../newredux/moveSlice";



5. 在 函数组件的生命周期函数中 使用


useEffect(()=>{ // 注意这个周期函数的用法，第一个参数是执行参数，第二个参数 是代表 某些值若发生改变 则重新触发内部执行的参数  
      dispatch(loadNewsTypeData());
      console.log('888',newTypeList)
      
    },[])