认识redux（一）

一、什么是Redux

二、Redux核心概念

1.store：存放数据的容器，一个应用中只能有一个store

import { createStore } from 'redux'      //redux提供 createStore 这个函数来生成store

const store = createStore(fn)            //createStore函数接收一个另一个函数作为参数，返回接收的store对象

2.state：store对象包含所有数据，如果想要得到某个时点的数据，就要对store生成快照，这种时点的数据集合，就叫state，当前时点的state，可以通过store.getState()获取

import { createStore } from 'redux'     //引入creatStore函数，生成store对象

const store = createStore(fn)           //通过接受另一个函数作为参数，得到新的store对象

const state = store.getState();         //得到当前时刻的数据集合

  redux规定，一个state对应一个view，只要state相同，view就相同

3.action

state的变化，会引起view的变化，但是，用户接触不到state，只能接触到view，action就是view发出的通知，表示state应该要发生变化了

强制使用action的好处是可以清晰地知道数据到底发生了什么变化，所有的变化都是可追踪的，可预测的

const action = {                 //action是一个js对象，用来描述这次更新的type和content
    type:'ADD_TYPE1',            //type属性是action对象的必需属性，表示action的名称
    payload:'learn redux'        //action携带的字符串
}

4.Action Creator

view要发送多少种消息，就会有多少种action。可以定义一个函数 Action Creator 来生成action，以简化代码量

const ADD_TYPE1 = '添加TYPE1';
function addType(text){                   //函数addType就是一个action creator
  return {
    type:ADD_TYPE1,
    text
  }
}
const action = addType('learn redux');

5.store.dispatch()：view发出action的唯一方法

import {createStore} from 'redux'
const store = createStore(fn)
store.dispatch({            //store.dispatch接收一个action对象作为参数，将它发送出去
  type:'ADD_TYPE1',
  payload:'learn redux'
})

上述代码也可以写成：

import {createStore} from 'redux'
const store = createStore(fn)
const ADD_TYPE1 = '添加TYPE1';
store.dispatch({            //store.dispatch接收一个action对象作为参数，将它发送出去
  addType('learn redux')
})
function addType(text){     //函数addType就是一个action creator，该方法返回一个action对象
  return {
    type:ADD_TYPE1,
    text
  }
}

6.Reducer

store收到action后，必须给出一个新的state，这样view才会发生变化，这种计算的过程就叫reducer

const reducer = function(state,action){  //reducer是一个函数，接收当前的state和action作为参数
  //...
  return new_state                       //函数返回一个新的state
}

store.dispatch() 方法会自动触发reducer的自动执行，因此，store需要知道reducer函数，我们需要在创建store对象的时候，将reducer传入到 createStore() 方法中

import {createStore} from 'redux'
const store = createStore(reducer) //createStore方法接收reducer作为参数，生成一个新的store对象

7.纯函数

纯函数：输入相同，输出必相同    //Date.now() 和 Math.random() 方法每次得到的结果都不一样，不是纯函数

reducer是一个纯函数，保证同样的state，必定得到同样的view，在reducer函数里不能改变state

8.store.subscribe()  

监听函数，一旦state发生变化，就自动执行这个函数

import {createStore} from 'redux'
const store = createStore(reducer)
store.subscribe(listener)

三、store的实现

1.store对象的3个方法：

store.getState()         //获取某个时刻的数据集合
store.dispatch()         //view发出action的唯一方式
store.subscribe()        //监听state变化的函数

2.store对象的生成

const createStore = (reducer) => {                 //creatStore函数接收reducer作为参数
  let state;                                        
  let listeners = [];
  
  const getState = () => { state }                 //定义getState()函数

  const dispatch = (action) => {                   //定义dispatch()函数
    state = reducer(state,action);                 //reducer方法返回一个新的state对象
    listeners.forEach(listener => listener())
  }
  
  const subscribe = (listener) => {                //定义subscribe()函数
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(...)
    }
  }
  return {getState,dispatch,subscribe}
}

四、redux工作流程

1.view发出action 

store.dispatch(action)

 2.view发出action后，store对象会自动调用reducer，reducer传入两个参数：当前state和收到的action，reducer会返回一个新的state

3.state发生变化后，store就会调用监听函数listener

store.subscribe(listener)      //通过store.subscribe()方法设置监听函数listener

listener 可以通过store.getState() 得到当前状态，如果使用的是react，可以重新渲染view

function listener(){
  let newState = store.getState();
  component.setState(newState);
}