初识redux走向redux-react

废话不多说，先上一张图

首先记住redux设计思想

　　Web应用是一个转态机，视图与转态是一一对应的

　　所有的转态，保存在一个对象里

1.store

　　存储数据的容器，整个应用只有一个state，Redux提供createStore这个函数生成Store，Redux store保存了根reducer返回的完整state树

const { createStore } = require('redux')
//创建store的时候就要把reducer放进去，reducer改state，state写在reducer里
//store提供三个方法
/*
store.getState() 获取state
store.dispatch(action) 更新state
store.subscribe(listener) 注册监听器
*/
const store = createStore(reducer)
console.log(store)
// subscript是个订阅函数，他在状态发生变化的时候，自动调用
store.subscribe(() => {
  console.log(store.getState())
})

// 调用store.dispatch, 会再次执行reducer
setInterval(() => {
  store.dispatch({
    type: 'increment',
    //负载，载荷
    payload: 4
  })
}, 1000)

2.State

　　Store对象包含所有数据。如果想的得到某个时点的数据，就要对Store生成快照。这种时点的数据集合，就叫State。当前时刻的State，可以通过store.getState（）拿到。

　　一个State对应一个View，只要State相同，View就相同。

3.Action

　　View通过Action导致State发生变化

　　store.dispatch（）是View发出Action的唯一方法。携带一个Action对象作为参数，将它发送出去。

　　Action是一个对象。其中的type属性是必须的，表示Action的名称。payload是它携带的信息。

　　可以这样理解，Action描述当前发生的事情。改变State的唯一办法，就是使用Action。他会运送数据到Store。

　　Action Creator： view要发送多少种消息，就会有多少种Action。通过Action Creator函数来生成Action

4.reducer

　　reducer就是实现（state，action）=> newState的纯函数--正真处理state的地方。不修改原来的state，而是通过返回新的state的方式去修改。

　　纯函数  同样的输入一定会有同样的输出

const reducer = (state = defaultState, action) => {
  // redux会在开始的时候执行一次reducer, action.type = @@redux/INITc.v.p.a.u.f
  if (action.type === 'increment') {
    return {
      //state = 1  直接修改state不允许  state + 1 可以
      //state定义对象，在这里返回的时候也要返回对象
      count: state.count + action.payload
    }
  }
  return state
}

撸到这里是不是有点云里雾里，

下面来看一个redux实现的加减栗子

Counter.js

import React, { Component } from 'react'

import store from './store'

class Counter extends Component {
  constructor (props) {
    super(props)
    this.increment = this.increment.bind(this)
    this.decrement = this.decrement.bind(this)

    this.state = {
      count: store.getState()
    }

    store.subscribe(this.changeCount.bind(this))
  }
  render () {
    return (
      <div>
        <button onClick={this.decrement}>-</button>
        { this.state.count }
        <button onClick={this.increment}>+</button>
      </div>
    )
  }
  increment () {
    store.dispatch({
      type: 'increment'
    })
  }
  decrement () {
    store.dispatch({
      type: 'decrement'
    })
  }

  changeCount () {
    this.setState({
      count: store.getState()
    })
  }
}

export default Counter

　　store.js

import { createStore } from 'redux'

const defaultState = 1

const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'increment' :
      return state + 1
    case 'decrement' :
      return state - 1
    default :
      return state
  }
}

const store = createStore(reducer)

export default store