1.redux中action传参

        a.传参

                        在时间中,第二个参数就是传递的值,num就是传递的参数

                        onClick={()=>{store.dispatch({type:'del',num:1})}}

        b.接收参数

const reducer = function (state = { ...data }, action) {switch (action.type) {case "del":console.log(action.num)break;default:}return state
}

2.模块化

        a.分组件写reducer,进行暴露

        b.写根组件root.js使用combineReducers对组件进行合并

//合并方法
import { combineReducers } from "redux";
//两个分组件
import numReducer from "./numReducer";
import todoReducer from "./todoReducer";
//放在root中合并
const rootReducer=combineReducers({numR:numReducer,todos:todoReducer
})export default rootReducer;

        c.在index.js中挂载

import { createStore } from "redux";
import rootReducer from "./rootReducer";
const store=createStore(rootReducer);export default store;

        d.在组件中的使用方法

import Context from "../../context";
import { useContext,useState } from "react";
function ReduxPage(){const {store}=useContext(Context);const {numR}=store.getState();const [n,setN]=useState(1);console.log(store.getState().numR.num)// 组件第一次更新完毕后，将组件更新的方法放入到store事件池中const update=()=>{setN(n+1)}store.subscribe(update);return (<div>//属性使用<p>{numR.num}--{store.getState().numR.num}</p>{/* <p>{todosR.num}</p> */}//方法使用<p><button onClick={()=>store.dispatch({type:'todos/add',n:10})}>add</button><button onClick={()=>store.dispatch({type:'todos/reduce'})}>reduce</button></p></div>)
}export default ReduxPage;

3.react-redux

        a.安装react-redux   npm install react-redux

        b.在store里添加深拷贝,实现页面同步响应

                         state=JSON.parse(JSON.stringify(state))

const numReducer=function (state={num:10,count:1000,list:[]},action){//深拷贝state=JSON.parse(JSON.stringify(state))switch(action.type){case "add":state.num+=action.n;console.log(state.num);break;case "reduce":state.num--;console.log(state.num);break;case "getList":state.list=action.data;break;default:}return state;
}
export default numReducer;

        c.在页面中使用

                    useSelector接收数据

                    useDispatch接收方法

 

import { useSelector,useDispatch } from "react-redux";
import { fetchData } from "../../store/actions";
function ReactReduxPage2(){const {num,list}=useSelector(state=>state.numR);const dispatch=useDispatch();console.log(list);return (<div><h3>{num}</h3><button onClick={()=>dispatch({type:'add',n:100})}>addFn</button><button onClick={()=>dispatch({type:'reduce'})}>reduceFn</button><button onClick={()=>dispatch(fetchData())}>fetchData</button><ul className="list">{list.map(item=><li key={item.id}>{item.title}</li>)}</ul></div>)
}
export default ReactReduxPage2;

 

4.redux-thunk(异步请求的中间键)

        a.安装   npm install redux-thunk

        b.在store的index中引入   import thunk from 'redux-thunk'

                                                 import { applyMiddleware} from "redux";

        c.在store的index中建立中间键   const store=create(rootreducer,applyMiddleware(thunk))

        d.在异步请求文件使用

export const fetchData=()=>{console.log(123);return async (dispatch,getState)=>{   console.log(456);//    fetch("https://cnodejs.org/api/v1/topics?tab=good").then(res=>res.json()).then(res=>{//         console.log(res);//     }).catch(res=>{})let res=await fetch("https://cnodejs.org/api/v1/topics?tab=good").then(res=>res.json());console.log(res);dispatch({type:'getList',data:res.data})}
}

        e.在组件中使用

//引入
import { fetchData } from "../../store/actions";
//调用
<button onClick={()=>dispatch(fetchData())}>fetchData</button>