浅谈redux(一)

文章借鉴于：Redux入门教程

一.什么是Redux?

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。他可以弥补react两个不足之处，代码的结构和组件之间的通信。Redux有三大原则，单一的数据源，state是只读的，使用纯函数来执行修改。

二.什么情况下使用Redux？

• 某个组件的状态需要共享
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态
• 不同身份的用户有不同的渲染
• 多个用户之间可以相互协作
• 与服务器大量交互，或者使用了WebSocket
• View要从多个来源获取数据

以上情况当你使用Redux时，会发现它的妙处。

三.Redux中的API

3.1 Store
当你使用Redux时，第一步需要创建一个Store仓库,Store像是一个容器。整个项目中只有一个Store

import { createStore } from 'redux';
const store = createStore(reducer);
exprot default store

以上代码中创建了一个createStore实例，返回的是一个对象

3.2 State
State是Store仓库中的快照数据,你可以通过store.getState()获取到。

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

const state = store.getState();

你需要知道Redux的设计思路,web应用是一个状态机,视图与数据是一一对应的，所以一个State对应一个View。只要State相同,View就相同

3.3 Action Creator
你可以在组件中创建一个actionCreator.js文件,此文件专门用来添加Action，Action 是一个对象。其中的type属性是必须的，表示 Action 的名称,此对象会在组件中通过store.dispatch(actionCreator.incAction§)调用传给仓库用以改变state的数据

export default {
	incAction(p){
	return {
		type:'INCREMENT', //type的值必须要大写
		p
	}
  }
}

3.4 store.dispatch()
上文提到通过store.dispatch可以在View中发出Action，且这种方式是唯一发出Action的方法。

import { createStore } from 'redux';
import actionCreator from './actionCreator'
const store = createStore(reduce);

//此处表示在组件中将数据传给store仓库
store.dispatch( actionCreator.incAction(p) )

3.5 Reducer
在上文都提到了一段代码:

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

在createStore函数中的reducer是什么呢？
他其实相当于State与View的加工厂,你可以通过Reducer将Store收到的Action经过加工,返回一个新的State返回给View。并且Reducer是一个纯函数(只要同样的输入，必定得到同样的输出),这就可以保证同样的State，必定得到同样的View。但也正因为这样,Reducer不能改变State,必须返回一个全新的对象

const initalState = {
	n:1
}
const reducer = (state=initalState,action){
	switch(action.type){
		case 'ADD':
		 	let newState = {...state}
		 	newState.n += 1
		 	return newState
		 default:
		 	return state
		 	
	}
}
export default reducer

上述代码可以看出,Reducer将store接收到的Action加工,返回了一个新的State,并且Action中的type决定了Reducer中的行为。

3.6 store.subscribe()
既然能在View中将参数通过dispatch的方式改变数据,那么怎么在View中获取最新的State数据呢,这时就需要用到store.subscribe()。一旦State发生变化，就会自动执行这个函数，从而在View中获取最新的State。

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

export default class One extends Component {
    constructor(props) {
        super(props)
        this.state = {
            b: store.getState().b
        }
        store.subscribe(this.change)
    }
    //数据改变
    change = () => {
        this.setState({
            b: store.getState().b
        })
    }

下面通过一张Redux单项数据流来解释Redux工作流程

首先用户发出Action，然后Store自动调用Reducer，并且传入两个参数:当前State 和收到的 Action。 Reducer 会返回新的 State 。State 一旦有变化，Store 就会调用监听函数，从而获取新的数据重新渲染View