redux / react-redux学习

redux

/*
 * 该文件store.js只为了暴露store
 */

import { legacy_createStore,applyMiddleware } from "redux";
// 异步中间件
import thunk from 'redux-thunk'
import reducers from "./reducers.js";

export default legacy_createStore(reducers,applyMiddleware(thunk));

//creators.js
export const ChangeUser = data => ({type:"CHANGE_USER",payload:data})

export const asyncChangeUser = (data,time) =>{
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(addnum(data))
        },time)
    }
}

/*
 * reducers.js 该文件只暴露reducer函数   用于初始化状态、加工状态
 * reducer函数接受两个参数 之前的状态state，动作对象action
 */
const initState = {
    user:'曹操'
};

function reducer(state = initState, action: action) {
    const { type, payload } = action;
    switch (type) {
        case 'CHANGE_USER':
            state.userName = payload
            return state
        default:
            return state
    }
}

export default reducer

// 组件获取获取redux数据 store.getState()
store.getState().user = 曹操
//改变redux中状态
store.dispatch(ChangeUser('改变后的user'))
// 检测redux中状态改变重新渲染页面 实现数据响应式
store.subscribe(()=>{
    render
})

react-redux

reactui组件和容器组件 redux不能直接和ui组件通信，只能和容器组件通信，所以需要在容器组件使用connect把ui组件和redux连接起来

在容器组件使用store={store} 由于后期组件多 直接在顶级组件中使用 解耦合

mapStateToProps将redux的state传给ui组件 mapDispatchToProps将redux的action传给ui组件 ui组件通过props接收

//组件
const mapStateToProps = (state) => {
  return {
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    changeUser: (data) => {
      dispatch();
    },
  };
};

const Child = (props) => {
 
};

export default connect(mapStateToProps, mapDispatchToProps)(Child);

后续开发一个模块就有一个reducer，使用多个reducer，使用combineReducers整合

import { composeWithDevTools } from "redux-devtools-extension";
const store = legacy_createStore(
  combineReducers({  //整合所有reducer
    user: reducer,
    count: countReducer,
  }),
  composeWithDevTools() //可视化插件
);