[前端]Redux

在node环境下使用redux

npm install redux

/store/index.js
const {createStore} from “redux”
const userinfo={
name:"niuniu"
}
//返回值会作为state里的数据，默认返回是为了初始化数据，只要在派发一次后，state里就会有值
function reducer(state=userinfo,actions){
   swtich(actions.type){
     case:updatename：
     return {  ...state,name:actions.name}
     default：return state
   }
}
const store=createStore(reducer)
module.exports=store

在redux中通过派发action来操作数据

/index.jsx
const store=require("./store/index.js")
store.dispatch({type:"updatename",name:"niuniuniu"})
store.getState()
//在生命周期函数监听，发生变化就会回调，我们重新拿数据，渲染到组件的state中
const unSubscribe=store.subscribe(()=>{})
//执行这个返回值方法就会取消回调，一般用在卸载生命周期中
unSubscribe()

react-redux

npm i react-redux
/index.js
import { Provider} from "react-redux"
import redux from './store/app';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={redux}>
      <App />
    </Provider>
  </React.StrictMode>
);
./App.jsx
在页面内使用connect来获取数据
import { connect } from 'react-redux'
//数据改变会自动渲染（返回的高阶组件内生命周期帮我们监听并重置了构造函数里的state），这里映射是我们顶层传入的store可能存有大量数据，我们这个页面可能只会用到一部分，这两个方法的返回值都会返回到组件的props中
const mapStatetoProps=(state)=>({
   couter:state.couter,
   banner:state.banner 
})
function MapDispatchToProps(disptch){
    return{
        f1(){
        //这里我们可以直接派发action
        }
    }
}
export default connect(mapStatetoProps,MapDispatchToProps)(App) 

关于reducer拆分模块

//一个createStore，不同的reduce整合，由于拆分模块，我们在connect里拿数据也得先在state里先拿模块取到对应的对象再去那里面的数据
import {createStore,applyMiddleware,compose,combineReducers} from "redux"
//执行异步操作
import {thunk} from "redux-thunk"
import Couterreducer from "./couter";
import bannerReduce from "./banner";
const store=combineReducers({
   couter:Couterreducer,
   banner:bannerReduce
})
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const redux=createStore(reducer,composeEnhancers(applyMiddleware(thunk)))
export default redux

//对派发action的封装,关于type，由于reducer里使用的type和派发的type相同，我们抽取成常量
export const updateName=(name)=>({type:"aaa",name:name})
export const getdata = () => {
  //这个方法会自动执行
  function fetchdata(dispatch, state) {
    console.log(state, dispatch);
    axios.get("url").then((res) => {
      console.log(res.data.data.banner);
      dispatch(getbanner(res.data.data.banner));
    });
  }
  return fetchdata;
};

关于RTK和手写connect，以及插件的事件机制随后补充