react中redux的使用

 

 

这是reduce的完整模板

(1).去除Count组件自身的状态

(2).src下建立:

  -redux

        -store.js

                -count_reducer.js

store.js 

 (3).store.js：

            1).引入redux中的createStore函数，创建一个store

            2).createStore调用时要传入一个为其服务的reducer

            3).记得暴露store对象

/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)

count_reducer.js：

    1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态

    2).reducer有两个作用：初始化状态，加工状态

    3).reducer被第一次调用时，是store自动触发的，

                    传递的preState是undefined,

                    传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from './constant'

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
	// console.log(preState);
	//从action对象中获取：type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case INCREMENT: //如果是加
			return preState + data
		case DECREMENT: //若果是减
			return preState - data
		default:
			return preState
	}
}

(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>

        备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

 import store from './redux/store'

store.subscribe(()=>{

    ReactDOM.render(<App/>,document.getElementById('root'))

})

constant.js 

放置容易写错的type值

/* 
该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

 count_action.js 

专门用于创建action对象

/* 
	该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'

//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(createIncrementAction(data))
		},time)
	}
}