初学react + redux

Posted 2020-11-07 hunote

react + redux结合开发：

　　1，什么是redux，为什么要用redux：

　　　　　　在用react开发应用的时候随着项目的不断复杂化，管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，

　　　　　　那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。

                      state 在什么时候，由于什么原因，如何变化已然不受控制。所以redux出现了，Redux 试图让 state 的变化变得可预测。

　　2，redux的核心：

　　　　　　redux的核心就是 Store，Action，Reducer，

　　　　　　### Action   state发生变化的载荷，也就是定义事件，根据action的不同type定义不同的action，不同的action传到reducer执行不同的方法

　　　　　　

const CLICK_ADD ="CLICK_ADD";      //action的type  这个是必须的！
export const clickAdd = index => {    

  return { type:CLICK_ADD, payload: index };     //payload是可选的，index是事件传过来的值
};

　　

　　

　　　　　###Reducer   接受旧的的state和action，返回新的state ，就是执行事件

　　　　　　　　

const initialState = {    //初始sttae（旧的state）
};

const reducer = (state = initialState, action) => {
  switch (action.type) {   //根据action的type处理不同的action
    case CLICK_ADD:
      return {
        ...state,   //旧的state
        //改变state的值
      };

default:   //默认返回旧的state
  return state;
}

　　          ###Store    可以说就是state的中转站，通过定义好的Reducer创建Store   

  const store = createStore(rootReducer, applyMiddleware(logger));  //applyMiddlerware是一个可以实时显示action前后state的状态的插件

　　

通常我们公司都会把action和reducer写在一个js文件里

 

react和redux整合：

　　　　1，首先一个主页index.js：

　　　　　　

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import registerServiceWorker from "./registerServiceWorker";

import { applyMiddleware, createStore } from "redux";
import { Provider } from "react-redux";
//rootReducer 是整合的reducer  （详情看后面）
import rootReducer from "./reducers";
/*
这里的CalendarContainer 是一个连接要被渲染的标签<Calendar/>的js （详情看后面）
*/
import Calendar from "./container/CalendarContainer";
import logger from "redux-logger";

//通过Reducer创建store，applyMiddleware是一个监听store的state在action前后变化的插件
const store = createStore(rootReducer, applyMiddleware(logger));

ReactDOM.render(
  //把store赋给Provide标签，让目标组件Calendar成为Provider的子组件，传递store给子组件
  <Provider store={store}>
    <Calendar />    //要被渲染的js
  </Provider>,
  document.getElementById("root")
);
registerServiceWorker();

　　2，写一个reducer，先创建一个reducers文件夹，创建一个calendar.js ，一个index.js  

　　　　###calendar.js 

　　　　

const CLICK_ADD = "calendar/CLICK_ADD";  定义action的type
export const clickAdd = index => {   //index传递的值
  return { type: CLICK_ADD ,payload:index};
};

const initialState = {     //初始sttae（旧的state）
};

const reducer = (state = initialState, action) => {
  switch (action.type) {    //根据action的type处理不同的action
    case CLICK_ADD:
      return {
        ...state,   //旧的state
        //改变state的值
      };

default:   //默认返回旧的state
  return state;
}

　　###index.js  整合所有的reducer

　　

import { combineReducers } from "redux";
import calendar from "./calendar";

export default combineReducers({
  calendar
});

　　在 1中=》     import rootReducer from "./reducers";       //导入reducers文件夹的时候，会自动读取整合的index.js

 

3，连接react

　　这里有两个方法，mapStateToProps是向要渲染的js传递state的

　　　　　　　　　　mapDispatchToProps是向要渲染的js传递事件的

import React from "react";
import { connect } from "react-redux";
import Calendar from "../components/Calendar";
import moment from "moment";
import {
  clickAdd     //导入的事件
} from "../reducers/calendar";

const mapStateToProps = (state, ownProps) => {
  //这里的state就是store
  return {
    //这里返回state给要被渲染的js
  };
};

const mapDispatchToProps = (dispatch, ownProps) => ({
　　//这里返回事件给要被渲染的js
  clickAdd: index => dispatch(clickAdd()，index)
});

//链接Redux和React
export default connect(mapStateToProps, mapDispatchToProps)(Calendar);    //这里连接要被渲染的Calendar