redux解析

redux是状态管理模块，把所有状态都统一进行管理，方便组件之间传递数据。一场景：
1、某个组件的状态，需要共享
2、某个状态需要在任何地方都可以拿到
3、一个组件需要改变全局状态
4、一个组件需要改变另一个组件的状态
二原理：
客户端通过dispatch发送action，action的变化会触发redures，redures返回新的state，store接收到新的state，subscribejian监听store变化，渲染根组件。
三实践
1、通过dispatch发送action

import React from 'react';
import './App.css';
class App extends React.Component {
  render() {
    const value = this.props.store.getState();
    return (
      <div className="App">
        <p>值：{value}</p>
        <select ref="num">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
        <button onClick={()=>this.increment()}>+</button>
        <button onClick={()=>this.decrement()}>-</button>
      </div>
    )
  };
  increment(){
    var num = Number(this.refs.num.value);
    this.props.store.dispatch({number:num,type:"INCREMENT"})
  }
  decrement(){
    var num = Number(this.refs.num.value);
    this.props.store.dispatch({number:num,type:"DECREMENT"})
  }
}
export default App;

2、redures返回新的state

const reducer = function(state=0,action){
    switch(action.type){
        case "INCREMENT":
            return state+action.number;
        case "DECREMENT":
            return state-action.number;
        default:
            return state;
    }
}
export default reducer;

3、监听store变化，渲染根组件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import redures from './redures/index.js';
import * as serviceWorker from './serviceWorker';
var store = createStore(redures);
function render(){
    ReactDOM.render(<App store={store} />, document.getElementById('root'));
}
render();
store.subscribe(render);
serviceWorker.unregister();

react-redux解析

主要是分离视图和数据，简化、方便redux。提供了Provider组件，方便跨组件传输数据。还提供connect组件，绑定当前组件和state、dispatch的关系，当前组件通过this.props就可以访问state和dispatch。
1、Provider使用

var store = createStore(redures);
ReactDOM.render(<Provider store={store}><App store={store} /></Provider>, document.getElementById('root'));

2、connect使用

function mapStateToProps(state) {
  return {
    value: state
  }
}
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: (num) => dispatch({number:num,type:"INCREMENT"}),
    onDecreaseClick: (num) => dispatch({number:num,type:"DECREMENT"})
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

redux-thunk解析

redux-thunk是redux的中间件，使action可以接收一个函数，函数接收两个参数dispatch和state，可用来处理异步任务。
一、引用
var store = createStore(redures, applyMiddleware(thunk));
二、action变成个函数

function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: (num) => dispatch((dispatch ,state)=>(
      setTimeout(function(){
        dispatch({number:num,type:"INCREMENT"})
      },3000)
    )),
    onDecreaseClick: (num) => dispatch((dispatch ,state)=>(
      setTimeout(function(){
        dispatch({number:num,type:"DECREMENT"})
      },3000)
    ))
  }
}

redux-logger解析

触发action会打印出日志，日志内容包括上个状态值和action和下个状态值。

image.png

import {createLogger} from 'redux-logger';
const logger = createLogger();
const store = createStore(redures, applyMiddleware(thunk ,logger));