redux入门

React在前端项目中扮演的角色是dom的抽象层以及组件的抽离与复用，没涉及到层级差过深的组件之间如何通信，以及整个应用代码结构的设计。

所以单靠React不能写大型应用，因为大型应用往往有着各个组件的共享状态和更复杂的组件通信问题，而redux的出现完美的解决了这个问题。

npm install redux --save

基本api

store // store就是保存数据的地方，有且只有一个store
import { createStore } from 'redux';

const state = {
   count: 0,
}

const reducer = (state, action) => {
  switch(action.type) {
    case 'add': 
      state.count + 1;
      return state;
    case 'reduce':
      state.count - 1;
      return state;
  }
}
// 这是一个reducer，为 (state, action) => state 的纯函数。
// 它描述了action把state更新成下一个state的过程。

var store = createStore(reducer);
// createStore函数接收一个纯函数(reducer)作为参数，返回一个初始的state。

export default store

我们可以根据store.getState()来拿到当前时刻的state

有时候一个数据源并不能满足我们的需求，redux允许我们创建多个reducer;

import { combineReducers } from 'redux';
import countReducer from './countReducer';
import instanceReducer from './instanceReducer';

let reducer = combineReducers({
    countReducer,
    instanceReducer
})

export default reducer

state // state 是 store在某一刻的快照
// redux中的state是不可变的，我们需要通过action创建一个新的state来更新store

现在我们创建了一个store，但是没有手段来更新store中的状态。这时候，我们就需要action来帮我们更新store中的状态啦！

state的变化，会触发view的变化，但是用户不能直接接触到state，只能接触到view，所以action是由具体的React组件发送给reducer的。

action是一个对象，其中type是必须的，在reducer中，我们要根据action发送来的type值去返回新的state。

const action = {
  type: 'add'
}

store.dispach是React组件与store通信的单向通道，我们想通过action更新store时，就需要用store.dispach发送action

const action = {
  type: 'add'
}
store.dispach(action)；// 这样才能有效的通知store更新state

上文是以store出发点阐述了如何更新store，下文我们将讲述如何从view(React组件)发送action通知reducer更新store。

npm install react-redux --save

首先我们需要用Provider包裹app的入口文件，并注入store。

import { Provider } from 'react-redux';
import { React } from 'react';
import root from './root'; // app的根目录
import store from './store'; // store 暴露的目录

function App() {
  return <Provider store={store}>
  <root />
</Provider>
}

如果某个组件需要使用store中的状态，则需要将该组件与store'链接'起来。

import { connect } from 'react-redux';
import React from 'react';
import { Button } from 'antd';

class Demo extends React.Component {
  render () {
    return <>
    <div>
      {this.props.count}
    </div>
    <Button onClick={this.props.addCount}></Button>
    <Button onClick={this.props.reduceCount}></Button>
    </>
  }
}

// 将store映射到Component的props中
const mapStateToProps = (store) => {
  return {
    count: store.count
  }
}

// 将action映射到Component的props中
const mapDispachToProps = (dispach) => {
  return {
    addCount: () => {
       const action = {
          type: 'add'
        } 
        dispach(action)
     },
    reduceCount: () => {
        const action = {
          type: 'reduce'
        } 
      dispach(action)
    }
  }
}

export default connect(mapStateToProps, mapDispachToProps)(Demo)

该组件如果不用store中的state，只承担发送action的作用，connect第一个参数写为null即可，反之亦然。