redux-case

基于redux的求和小案例

介绍

redux是一个专门用于做状态管理的JS库(不是react插件库)。

作用: 集中式管理react应用中多个组件共享的状态

组件之间状态共享，组件改变全局状态或其他组件状态

安装教程

1. npm install redux

redux求和案例讲解

基本概念

1. Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
2. 状态数据通过store.getState()拿到
3. action 一个对象，改变state
   
   action：{
   
   
   type：‘xxx’,
   
   data:‘xxx’
   
   }
4. 改变状态数据store.dispatch()
5. Reducer实际上是一个函数，接受action和state，实际上来处理state的地方，store.dispatch会触发Reducer执行
6. store.subscribe：redux可以修改状态，但不负责属性渲染页面，所以即使状态改变了，但页面并未更新，这个方法是监听函数，一旦state发生改变则触发此函数

常用api

• store.getState()
• store.dispatch()
• store.subscribe()

1.求和案例

	(1).去除Count组件自身的状态
	(2).src下建立:
					-redux
						-store.js  保存数据的地方
						-count_reducer.js  store将actionn和preState交给reducer处理
                        -count_action.js 专门用于创建action对象
		                -constant.js 放置容易写错的type值


	(3).store.js：
				1).引入redux中的createStore函数，创建一个store
                    import {createStore} from 'redux'
				2).createStore调用时要传入一个为其服务的reducer
                    import countReducer from './count_reducer'
                    export default createStore(countReducer)
				3).记得暴露store对象

	(4).count_reducer.js：
				1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态
				2).reducer有两个作用：初始化状态，加工状态
				3).reducer被第一次调用时，是store自动触发的，
								传递的preState是undefined,
								传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

import { INCREMENT, DECREMENT} from './constant'
/* 初始化状态和加工状态,从store拿出初始状态和action,返回新的状态
reducer的本质就是一个函数
接收参数为：preState,action */
export default function countReducer(preState, action) {
    if (preState === undefined) preState = 0
    const { type, data } = action
    switch (type) {

        case INCREMENT:
            return preState + data
        case DECREMENT:
            return preState - data
        default://初始化
            return preState
    }
}

	(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
			备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。（在index里面写）

import store from './redux/store'
ReactDOM.render(<App />, document.getElementById('root'));
store.subscribe(() => {
  ReactDOM.render(<App />,document.getElementById('root') );
})

 (6).count_action.js：负责创建action

     export const createIncrementAction = data=>({
                type:'increment',data
            })
        export const createDecrementAction= data => ({
            type: 'decrement', data
        })

(7).React Component如何发出指令：

store.dispatch(createIncrementAction(value*1))