redux使用教程一 ——实现计数器

安装

安装稳定版redux：cnpm install --save redux
安装redux绑定库和开发者工具：
cnpm install --save react-redux
cnpm install --save-dev redux-devtools

概念介绍

action 和 action创建函数

1. action：是一个JavaScript对象，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作(只有type是必须的，其它自动可以随意定义)；
   可以通过store.dispatch() 将数据传到store
   示例：

const action = {
	type:'ADD',
	step:1
}

2. action创建函数：返回值是action的函数

const action = step=>{
	return {
		type:'ADD',
		step
	}
}
//这种写法和上面的写法效果一直

reducer

reducer：就是一个接收state和action作为参数并返回新的state的方法。方法内部描述了state更新的逻辑。

注意事项：reducer是一个纯函数有以下约束

• reducer函数里面不能修改参数
• 函数内不能请求API、页面跳转等有副作用的操作
• 调用new Date()、Math.random()等非纯函数

例如：

//定义一个reducer
const changeCount = (state=0,action)=>{ //接收一个state和action
	//state具体的更新逻辑
    switch (action.type) {
        case "INCREMENT":
            return state+action.step
        case "DECREMENT":
            return state-action.step
        default:
            return state
    }
}

Store

1. 创建Store的方法

创建最简单的store

import {createStore} from 'redux'
//createStore的第一个参数是一个reducer，第二个可选参数用于设置 state 初始状态
const store = createStore(changeCount)

创建有初始值的store

import {createStore} from 'redux'
//如果传第二个参数则 state 的初始值为 6
const store = createStore(changeCount,6)

创建有中间件的store

import {createStore,applyMiddleware} from 'redux'
import logger from 'redux-logger'
//创建含有中间件的store，有state初始值的写法
const store = createStore(changeCount,6,applyMiddleware(logger))
//创建含有中间件的store，没有state初始值的写法
const store = createStore(changeCount,applyMiddleware(logger))

2. Store的作用

提供 getState() 方法获取 state；store.getState()
提供 dispatch(action) 方法发起action，自动触发reducer，更新 state；store.dispatch(action)
通过 subscribe(listener) 注册监听器，它的返回值是一个函数;当state变化的时候可以通过它来重新渲染页面
通过 subscribe(listener) 返回的函数注销监听器

3. 注意：Redux 应用只有一个单一的 store

计数器示例

import React from 'react'
import {createStore} from 'redux'
import ReactDOM from 'react-dom'

//定义action
import React from 'react'
import {createStore, applyMiddleware} from 'redux'
import ReactDOM from 'react-dom'
import logger from 'redux-logger'

//增加计数action
const increment = (step = 1) => (
    {
        type: "INCREMENT",
        step
    }
)
//减小计数action
const decrement = (step = 1) => (
    {
        type: "DECREMENT",
        step
    }
)
// 改变步长action(state中step的值)
const setStep = step => (
    {
        type: 'SETSTEP',
        step
    }
)

//state初始值
const state = {
    count: 6,
    step: 1
}
// reducer
const changeState = (state, action) => {
    switch (action.type) {
        case 'INCREMENT'://增加count逻辑
            return Object.assign(
            	{}, 
	            state, 
    	        {count: Number(state.count) + Number(action.step)}
    	    )
        case 'DECREMENT'://减小count逻辑
            return Object.assign(
            	{}, 
            	state, 
            	{count: Number(state.count) - Number(action.step)}
           	)
        case 'SETSTEP'://改变步长逻辑
            return Object.assign(
            	{}, 
            	state, 
            	{step: action.step}
            )
        default:
            return state
    }
}

// 创建store
/*
* @params
* changeState，reducer
* state，初始值
* applyMiddleware，应用的中间件，此处为打印日志的中间件
* */
const store = createStore(changeState, state, applyMiddleware(logger))

//定义一个函数返回要渲染的元素
const Counter = ({count, increment, decrement, step}) => (
    <div>
        <div style={{marginBottom:"10px"}}>
            步长：<input type="number" value={step} onChange={(event) => {
                    store.dispatch(setStep(event.target.value))
                }}/>
        </div>
        <button onClick={decrement}>减小</button>
        <span>{count}</span>
        <button onClick={increment}>增加</button>
    </div>
)

// 进行渲染
const rend = () => {
    ReactDOM.render(<Counter
        count={store.getState().count}
        decrement={() => store.dispatch(decrement(store.getState().step))}
        increment={() => store.dispatch(increment(store.getState().step))}
        step={store.getState().step}
    />, document.getElementById('root'))
}
rend()
// 监听state发生变化时渲染页面
store.subscribe(rend)

如果没有看明白的话可以结合阮一峰老师的这篇文章