Redux（初窥门经）

reudx用于集中式状态管理，但是，不是必需品。 “只有遇到React实在解决不了的问题，才需要Redux”

安装

npm install redux
或
yarn add redux

基本概念

1. Store，保存数据的容器

//store.js
//通过redux里的createStore传入一个reducer创建出Store
import {createStore} from 'redux'
//引入reducer,演示的是count
import Countreducer from './count_Reducer'
//生成并导出Store
exports default createStore(Countreducer)

2. Reducer，操作数据
   本质其实就是一个函数(⊙﹏⊙),但须是纯函数
   纯函数：不可以自行改变参数，不可有不确定因素的操作，输入对应的值要返回对应的值

//count_Reducer.js
//reducer有俩参数，preState(数据)，action(行为)
//我这里设置数据初始值是0，如果是数组对象也可以在里面|外面初始化
export default function countReducer(preState=0,action){
	//action里有type（操作类型）,data(操作数值)
	const{type,data} = action
    //用switch判断type(操作类型来)进行各自的操作
    switch(type){
    	case 'add':
        	return preState + data
        case 'subtract':
        	return preState - data
        //redux初始化的时候会调一下这个函数，default的就作为初始值了♪(^∇^*)
        default:
        	return preState
    }
}

这俩文件做完就可以使用了

//这里是使用store的组件
import React,{component} from 'react'
//引入上面1.的store的文件
import store from './redux/store'
export default class Count extends Component{
	render(){
    	return(){
        	<div>
           		{/* 这里h1标签是展示数据（state)，通过getState()获取*/}
           		<h1>{store.getState()}<h1>
                        <button onClick={this.add}>加</button>
                        <button onClick={this.subtract}>减</button>
            	<div>
        }
    }
    //加的方法
    add = () =>{
    	//使用dispatch会找到reducer里的函数，可以理解为。要求是个对象，具有相应的type属性与data
    	store.dispatch({type:'add',data:1})
    }
    //减的方法
    subtract = () =>{
    	store.dispatch({type:'subtract',data:1})
    }
}

3. Action 以上确实可以使用了，但通过action操作reducer更规范。
   因为reducer里不进行复杂逻辑,action里尽量放逻辑

//action.js
//处理‘加’
export function Add(data){
	return {type:'add',data}
}
//处理‘减’
export function Subtract(data){
	return {type:'subtract',data}
}

有了action，我们在组件使用的方式就要改下了

//使用store组件的部分
import {Add,Subtract} from './redux/action'

......

	//加的方法
    add = () =>{
    	store.dispatch(Add(1))
    }
    //减的方法
    subtract = () =>{
    	store.dispatch(Subtract(1))
    }

4. 异步action
   aciont返回对象就是同步，返回函数就是异步
   action默认是无法处理异步的，要借助中间件redux-thunk
   异步action不是必须使用的，也可以在组件里进行异步操作再action 安装

npm install redux-thunk
yarn add redux-thunk

//store.js
import {createStore,applyMiddleware} from 'redux'
import Countreducer from './count_Reducer'
import thunk from 'redux-thunk'
exoprt default createStore(Countreducer,applyMiddleware(thunk))

//action.js
//处理‘加’
export function Add(data){
	return {type:'add',data}
}
//处理‘减’
export function Subtract(data){
	return {type:'subtract',data}
}
//异步减
export function AsynSubtract(data){
	//return的函数默认有dispatch
	return(dispatch)=>{
    	setTimeout(()=>{
        	dispatch(Subtract(data))
        },500)
    }
}

5. constant 因为使用redux就是根据type进行操作的，所以定义一些常量比较好

//constant.js
export const ADD = 'add'
export const SUBTRACT = 'subtract'