React-Redux 入门教程

项目目录

整个项目目录分为图中所示：
Redux分为{Action,Reducer,Store}
入口文件为App.jsx

项目效果

从图中能够看出整个组件能够分为3个组件，内部Counter组件，计算Count的Summary的组件，以及整个容器组件ControlPanel

Content

React Redux 事实上是两个独立的产品， 应用可使用 React 而不使用
Redux ，也可使用 Redux 而不使用 React ，可是，若是二者结合使用，没有理由不使用
一个名叫 react-redux 的库这个库可以大大简化代码的书写;

react-redux 的两个最主要功能：
connect ：链接数据处理组件和内部UI组件；
Provider ：提供包含 store的context；
经过Content实现传递Store的目的
首先定义好

Action/index.jsx

export const Increment='increment'
export const Decrement='decrement'

export const increment=(counterCaption)=>({
    type:Increment,
    counterCaption
  }
)
export const decrement=(counterCaption)=>({
    type:Decrement,
    counterCaption
})

Reducer/index.jsx

import {Increment,Decrement} from '../Action'
export default(state,action)=>{
    const {counterCaption}=action
    switch (action.type){
        case Increment:
        return {...state,[counterCaption]:state[counterCaption]+1}
        case Decrement:
        return {...state,[counterCaption]:state[counterCaption]-1}
        default:
        return state
    }
}

Store/store.jsx

import {createStore} from 'redux'
import reducer from '../Reducer' 
const initValue={
    'First':0,
    'Second':10,
    'Third':20
}
const store=createStore(reducer,initValue)
export default store

在action中咱们会发现定义了两个常量，一个控制增长，一个控制减小，而后暴露出增长减小的函数。这两个函
数能够在Couter组件中调用

Counter.jsx

import React, { Component } from 'react'
import {increment,decrement} from '../Redux/Action'
import {connect} from 'react-redux';
const buttonStyle = {
margin: "20px"
}

function Counter({caption, Increment, Decrement, value}){
return (
        <div>
            <button style={buttonStyle} onClick={Increment}>+</button>
            <button style={buttonStyle} onClick={Decrement}>-</button>
            <span>{caption} count :{value}</span>
        </div>
    )
}
function mapState(state,ownProps){
return{
    value:state[ownProps.caption]
}
}
function mapDispatch(dispatch,ownProps){
return {
    Increment:()=>{
        dispatch(increment(ownProps.caption))
    },
    Decrement:()=>{
        dispatch(decrement(ownProps.caption))
    }

}
}

export default connect(mapState,mapDispatch)(Counter)

1.在counter组件中咱们会发现引入了增长和减小这两个函数，而后在mapDispatch函数中进行调用，暴露出增               
  加和减小合并的一个对象，而后经过解构在Counter函数组件中得到传递过来的通过mapDispath包装事后的增
  加和减小组件。mapDispatch函数的做用就是把内层函数组件的增长和减小的动做派发给Store

而后咱们转过来看Reducer/index.jsx
  reducer是专门处理数据逻辑的，经过传入（state,action），针对不一样的action返回一个不一样的store对象

Store/store.js

是专门对store进行的一个封装，经过createStore方法传入reducer和初始化state（initValue）来暴露        
 store对象，此对象非原始的store对象，该对象是对原始store进行注册，增长了若干方法。具体了解此方法能够**请戳这里**

[https://github.com/reactjs/redux/blob/master/src/createStore.js][1]

最后把store对象暴露给App.jsx在主入口进行调用

import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';
import store from './Redux/Store/Store.jsx'
import {Provider} from 'react-redux';
import ControlPanel from './Component/ControlPanel.jsx'
import './style/common.less'
render(
    <Provider store={store}>
    <ControlPanel />
    </Provider>,
    document.body.appendChild(document.createElement('div'))
);

咱们经过react-redux提供的顶层组件Provider传入store而后把要展现的ControlPanel写入顶层组件就好了，        
Provider提供了整个全局的store供全部的子组件进行调用

具体代码实现请git clone
https://github.com/jeromehan/...