redux，react-redux之间的关系

Redux 和react-redux之间的关系

首先要理解的是：redux 是独立的，和react没有什么关系，想要在react中使用redux需要进行一些列的操作把它们连接起来，这一些列的操作即为：react-redux
为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux（这是阮一峰说的，不是我说的）

Redux是什么？

redux 是一种数据状态管理模式，就相当于 vuex ，当我们要做的项目中有很多组件需要共享数据时，这时候就可以用 redux 搭建。
Redux的三个原则：唯一数据源，保持状态只读（只能通过调用dispach的形式来修改状态），数据改变只能通过纯函数（reducer）完成

如何搭建Redux?

redux包含3个比较重要的结构：store reducer action

redux的使用流程

1.怎么开始创建一个rudex?
安装redux
npm i redux react-redux --save

首先从redux中引入一个creatStore 用于创建store

import {creatStore} from "redux"const store = createStore(reducer);

这里需要传入一个纯函数 reducer 用于改变store里面所存储的状态（不可以直接操作他，具体怎么实现，稍后会讲）

2.如何获取store里面的值？

假如你要获取store里面存的状态state ，通过

store.getState（）

即可获取整个State对象

3.如何修改store里面的值？

假如你想修改State里面的数据，则需要通过发送指令

store.dispach（{type：“add”，num：20}）

来触发reducer ，通过reducer即可改变state返回一个新的state

改变的过程是怎样的？我们需要看一下reducer里面的结构

4.reducer是什么？状态如何更新？

const reducer = (state,action)=>{switch (action.type){case 'add':return state+action.num;case 'del':return state-action.num;default:return state}
};

简单地说就是前面dispatch里面的对象会作为action参数传入reducer函数，通过switch来判断要做的是什么操作，完成相应操作后即可反回一个新的state

5.但是到这里只是有了一个新的state，要如何把它更新到dom上呢

我们需要用store.subscribe（conponent）这里的参数component就是dom视图，实现一个监听的效果，只要state改变了，他会自动更新state到视图层

到这里基本上就完成了一个redux的基本流程

计时器例子

const Counter = ({ value, onIncrement, onDecrement }) => (<div><h1>{value}</h1><button onClick={onIncrement}>+</button><button onClick={onDecrement}>-</button></div>
);const reducer = (state = 0, action) => {switch (action.type) {case 'INCREMENT': return state + 1;case 'DECREMENT': return state - 1;default: return state;}
};const store = createStore(reducer);const render = () => {ReactDOM.render(<Countervalue={store.getState()}onIncrement={() => store.dispatch({type: 'INCREMENT'})}onDecrement={() => store.dispatch({type: 'DECREMENT'})}/>,document.getElementById('root'));
};render();
store.subscribe(render);

既然这样就已经实现了redux，那还需要react-redux干啥？

思考一个问题，如果我要在其他页面也操作这个store，要怎么做？
redux通过编写一些列的代码可以实现这个功能，但是代码量比较大逻辑比较复杂

react-redux 就是用来解决这个问题的

它提供 provider 和 connect 两函数来解决

直接看代码

安装 redux
npm install redux react-redux --save

1.创建action

//action.js
import actionTypes from './actionTypes'const actionCreator = {getInputChangeAction: (val) => ({type: actionTypes.CHANGE_INPUT_VLAUE,value: val}),btnClickAction: (val) => ({type: actionTypes.BTN_CLICK,value: val}),listDelAction: (val) => ({type: actionTypes.LIST_DEL,index: val})
}export default actionCreator;

2.创建actionTypes.js

//actionTypes.js
const types = {CHANGE_INPUT_VLAUE: 'change_input_value',BTN_CLICK: 'btn_click',LIST_DEL: 'list_del'
}export default types;

3.定义reducer纯函数

//reducer.js
import actionTypes from './actionTypes';const defaultState = {inputValue: '',list: [],
};
export default (state = defaultState, action) => {// reducer 可以接受state，但是绝不能修改stateconst newState = JSON.parse(JSON.stringify(state));switch (action.type) {case actionTypes.CHANGE_INPUT_VLAUE:newState.inputValue = action.value;break;case actionTypes.BTN_CLICK:newState.list.push(action.value);newState.inputValue = '';break;case actionTypes.LIST_DEL:newState.list.splice(action.index, 1);break;default:break;}return newState;
};

5.创建store

//store.js
import { createStore } from 'redux';
import reducer from './reducer';const store = createStore(reducer);export default store;

6.使用用react-redux 中的provider传递store

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './store'
import TodoList from './components/TodoList';// if (process.env.NODE_ENV === "development") {// require('./mock/index.js');
// }ReactDOM.render(<Provider store={store}><TodoList /></Provider>,document.getElementById('root')
);

TodoList.js

//TodoList.js
import React from 'react';
import { connect } from 'react-redux';
import actions from '../store/actionCreator';//组件中创建state的映射关系
//建后传入到connect()函数中即可通过props直接访问
const mapStateToProps = state => {return {value: state.inputValue,list: state.list,};
};
//组件中创建dispatch的映射关系
//创建后传入到connect()函数中即可通过props直接调用方法
const mapDispatchToProps = dispatch => {return {inputChange: e => dispatch(actions.getInputChangeAction(e.target.value)),btnClick: value => dispatch(actions.btnClickAction(value)),listClick: index => dispatch(actions.listDelAction(index)),};
};// todolist组件目前只有dom可以写成函数组件以提升效率；
// ui组件
const TodoList = props => {const { value, list, inputChange, btnClick, listClick } = props;return (<div><div><input onChange={inputChange} value={value}></input><button onClick={() => btnClick(value)}>提交</button></div><ul>{list.map((item, index) => {return (<li key={index} onClick={() => listClick(index)}>{item}</li>);})}</ul></div>);
};// 容器组件
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

这样就实现了通过react-redux管理组件状态