function App (props){ console.log(props,'===') return ( 
redux
{props.increment(10)}}>增加
{props.count}
{props.decrement(3)}}>减少
 ) }

export const increment = (num) => ({ type:'increment',payload:num }) export const decrement = (num) => ({ type:'decrement',payload:num })

import { initstate } from "../state/state"; //2.定义 reducer 第一个参数 state 第二个参数 action export function reducer(state = initstate,action){ console.log(action,'===action') switch(action.type){ case 'increment' :return {count:state.count + action.payload} break; case 'decrement' :return {count:state.count - action.payload} break; default :return state } }

function Color (props){ let style = { width:100, height:100, background:props.color, textAlign:'center', lineHeight:100, } console.log('colorprops',props) return( 
{props.fngreen()}}>green{props.fnred()}}>red
多个 state
 ) } export default Color

// 3.定义state export const initstate = { count:0 } //color export const colorstate = { color:'red' }

export const increment = (num) => ({ type:'increment',payload:num }) export const decrement = (num) => ({ type:'decrement',payload:num }) //处理color export const fngreen = () => ({ type:'fngreen'}) export const fnred = () => ({ type:'fnred' })

import { colorstate } from "../state/state"; //2.定义 reducer 第一个参数 state 第二个参数 action export function reducer(state = colorstate,action){ console.log(action,'===color') switch(action.type){ case 'fngreen' :return {color:'green' } break; case 'fnred' :return {color:'red'} break; default :return state } }

import {createStore} from 'redux' import{ reducer } from './reducer/reducer1' //1. 定义store let store = createStore( reducer ) export default store console.log(store)

import { connect } from 'react-redux'; import { bindActionCreators } from 'redux' import *as actionobj from '../store/action/action' function Color (props){ let style = { width:100, height:100, background:props.color, textAlign:'center', lineHeight:100, } console.log('colorprops',props) return( 
{props.fngreen()}}>green{props.fnred()}}>red
多个 state
 ) } const mapStateToProps = function(state){ return {color:state.color} } const mapDispatchToProps = (dispatch) => { return bindActionCreators(actionobj,dispatch) } export default connect(mapStateToProps,mapDispatchToProps)(Color);

import { combineReducers } from 'redux' import reducer1 from './reducer1' import reducer2 from './reducer2' export default combineReducers({ reducer1, reducer2 })

import { colorstate } from "../state/state"; //2.定义 reducer 第一个参数 state 第二个参数 action export default function reducer1(state = colorstate,action){ console.log(action,'===color') switch(action.type){ case 'fngreen' : return {color:'green' } break; case 'fnred' : return {color:'red'} break; default :return state } }

import { initstate } from "../state/state"; //2.定义 reducer 第一个参数 state 第二个参数 action export default function reducer2(state = initstate,action){ console.log(action,'===action') switch(action.type){ case 'increment' :return {count:state.count + action.payload} break; case 'decrement' :return {count:state.count - action.payload} break; default :return state } }

import {createStore} from 'redux' import reducer from './reducer' //1. 定义store let store = createStore( reducer ) export default store 

{ reducer1:{color:'red'}, reducer2:{count:0} }

import { colorstate } from "../state/state"; //2.定义 reducer 第一个参数 state 第二个参数 action export default function reducer1(state = colorstate,action){ console.log(action,'===color') switch(action.type){ case 'fngreen' : return {...state,color:'green' } break; case 'fnred' : return {...state,color:'red'} break; default :return state } }

import { initstate } from "../state/state"; //2.定义 reducer 第一个参数 state 第二个参数 action export default function reducer2(state = initstate,action){ console.log(action,'===action') switch(action.type){ case 'increment' :return {...state,count:state.count + action.payload} break; case 'decrement' :return {...state,count:state.count - action.payload} break; default :return state } }