react redux實例(dispatch,actoin,reducer)

src/container/index.js文件
import React, { Component } from ‘react’
import PropTypes from ‘prop-types’
import { bindActionCreators } from ‘redux’
import { connect } from ‘react-redux’
import {getTotalAmount, } from ‘…/…/redux/actions’
class WaitContainer extends Component {
…省略其它代碼
componentWillReceiveProps(nextProps) {
if (this.props.hisTotalAmount !== nextProps.hisTotalAmount && nextProps.hisTotalAmount.preload){
console.log("hisTotalAmount返回結果: ",nextProps.hisTotalAmount)
this.setState({
total_amount: nextProps.hisTotalAmount.total_amount,

			  })
		  }
  }
....省略其它代碼

}
WaitContainer.propTypes = {
hisTotalAmount:PropTypes.object.isRequired,
}
function mapStateToProps(state) {
return {
hisTotalAmount : state.hisTotalAmount,
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
getTotalAmount,
}, dispatch),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(WaitContainer))

src/redux/actions/total.act.js文件
import * as TYPES from ‘…/types’
export function getTotalAmount(opt) {
return (dispatch) => {
const route = ‘total_amount’
const method = ‘GET’
const headers = {
…HEADERS,
Authorization: opt.token,
}
const success = (data) => {
console.log("hisTotalAmount action 返回結果: ",data)
dispatch({ type: TYPES.TOTAL_AMOUNT, result: data })
}
request(route, opt.params, dispatch, success, { method, headers })
}
}

src/redux/actions/index.js文件

export {
getTotalAmount,

} from ‘./total.act’

src/redux/reducers/index.js文件
export {
hisTotalAmount,
} from ‘./total.rdc’

src/redux/reducers/total.rdc.js 文件
import * as TYPES from ‘…/types’
const initialState = {
preload: false,
items: [],
}
export function hisTotalAmount(state = initialState, action) {
console.log("hisTotalAmount reducer 返回結果: ",action)
switch (action.type) {
case TYPES.TOTAL_AMOUNT:
return {
…state,
preload: true,
…action.result,
}
default:
return state
}
}

src/redux/type.js文件
export const TOTAL_AMOUNT = ‘TOTAL_AMOUNT’

src/redux/configureStore.js文件
import { createStore, combineReducers, compose, applyMiddleware } from ‘redux’
import thunkMiddleware from ‘redux-thunk’

import { routerReducer, routerMiddleware } from ‘react-router-redux’
import { pendingTasksReducer } from ‘react-redux-spinner’

import * as reducers from ‘./reducers’

export default function configureStore(history, initialState) {
const reducer = combineReducers({
…reducers,
routing: routerReducer,
pendingTasks: pendingTasksReducer,
})
// const loggerMiddleware = createLogger()
const store = createStore(
reducer,
initialState,
compose(
applyMiddleware(
thunkMiddleware,
routerMiddleware(history),
),
),
)
return store
}

src/entries/index.js文件
import React from ‘react’
import { render } from ‘react-dom’
import { Provider } from ‘react-redux’
import { Router, hashHistory } from ‘react-router’
import { syncHistoryWithStore } from ‘react-router-redux’
import routes from ‘…/routes/’
import { LocaleProvider } from ‘antd’;
import zhCN from ‘antd/lib/locale-provider/zh_CN’;
import configureStore from ‘…/redux/configureStore’
const store = configureStore(hashHistory)
const { document } = global
const history = syncHistoryWithStore(hashHistory, store)
render(
(





), document.getElementById(‘root’),
)

{ProjectROOT}/webpack.config.js文件
const path = require(‘path’)
const webpack = require(‘webpack’)
const nodeModulesPath = path.join(__dirname, ‘/node_modules’)
module.exports = {
entry: {
index: ‘./src/entries/’,
vendor: [‘react’, ‘react-dom’, ‘redux’, ‘antd’],
},
…省略其它代碼
}