标签：case 连接 containe ... mode component 返回 const document
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
标签：case 连接 containe ... mode component 返回 const document
原文地址：https://www.cnblogs.com/huNote/p/9063554.html
