store:
import {createStore,applyMiddleware, compose} from "redux"; import thunk from "redux-thunk"; import rootReducer from "./reducers/rootReducer"; const middlewares = [ applyMiddleware(thunk) ]; const store = initialState => createStore(rootReducer, initialState, compose(...middlewares)); export default store;
rootReducer:
import {combineReducers} from "redux"; import {reducer as toastr} from "react-redux-toastr"; const rootReducer = combineReducers({ toastr, counterReducer }); export default rootReducer;
counterReducer:
import * as types from "../actions/actionType"; const initialState = { count: 0 }; const counterReducer = function (state = initialState, action) { const count = state.product; switch (action.type) { case types.INCREMENT: return {count: count + 1}; case types.DECREMENT: return {count: count - 1}; default: return state; } }; export default counterReducer;
actionType:
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
Counter:
import {connect} from "react-redux"; import * as types from "actions/actionType"; const mapStatetoProps = state =>{ return { value: state.counterReducer.count } } const mapDispatchToProps =dispatch => { return { onIncrement: ()=>dispatch({type: types.INCREMENT}), onDecrement: ()=>dispatch({type: types.DECREMENT}) } } class Counter extends React.Component { render() { const {count, onIncrement, onDecrement} = this.props; return ( <div> <span>{count}</span> <button onClick={onIncrement}>+</button> <button onClick={onDecrement}>-</button> </div> ) } } const CounterContainer = connect( mapStateToProps, mapDispatchToProps )(Counter) export default CounterContainer;
counterAction:
import * as types from "./actionType"; export function increment(count) { return { type: types.INCREMENT, count } } export function decrement(count) { return { type: types.DECREMENT, count } }
onIncrement: ()=>dispatch({type: types.INCREMENT}) =》
onIncrement: (count)=>dispatch(actions.increment(count)),
use redux-actions:
import {createAction} from "redux-actions"; import * as types from "./actionType"; export const increment = createAction(types.INCREMENT); export const decrement = createAction(types.DECREMENT);
Redux Thunk 中间 件 可以 让 action 创建 函数 先不 返回 action 对象, 而是 返回 一个 函数。 通过 这个 函数 延迟 dispatch 或者 只在 满足 指定 条件 的 情况下 dispatch。 这个 内部 函数 接受 store 的 两个 方法 dispatch 和 getState 作为 参数。
update action:
import {createAction} from "redux-actions"; import * as types from "../../constant/ActionType"; export const increment = createAction(types.INCREMENT); export const decrement = createAction(types.DECREMENT); export function incrementIfOdd() { return (dispatch, getStore) => { const count = getStore().CounterReducer.count; if (count % 2 ==0) { return } dispatch(increment()) } }
update container :
import React from "react"; import {connect} from "react-redux"; import {Row, Col, Button} from "antd"; import * as actions from "../../reduxModel/actions/CounterAction"; import "./index.scss"; const mapStateToProps = state => { return {value: state.CounterReducer.count} }; const mapDispatchToProps = { onIncrement: actions.increment, onDecrement: actions.decrement, onIncrementIfOdd: actions.incrementIfOdd }; class Home extends React.Component{ render() { const {value, onIncrement, onDecrement, onIncrementIfOdd} = this.props; return ( <div className="app-home"> <div className="app-layout-container"> <Row type="flex" justify="center" className="app-layout-body"> <Col span={4}> sidebar </Col> <Col span={20} className="page-panel"> welcome Home <div className="form-btn-group"> <span>{value}</span> <Button type="dashed" htmlType="button" onClick={onIncrement}>+</Button> <Button type="dashed" htmlType="button" onClick={onDecrement}>-</Button> <Button type="dashed" htmlType="button" onClick={onIncrementIfOdd}>add if odd</Button> </div> </Col> </Row> </div> </div> ) } } const HomeContainer = connect( mapStateToProps, mapDispatchToProps )(Home); export default HomeContainer;