開(kāi)發(fā)腳手架： create-react-app
環(huán)境：

image

寫了個(gè)demo，總共三個(gè)文件。app.js頁(yè)面組件、index.js入口文件、redux.js存放reducers和store，當(dāng)然action也可以抽離出來(lái)，我寫在了app里，下面是代碼：

index.js入口：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import reducer from './redux';
import thunk from 'redux-thunk';
//創(chuàng)建store

const store = createStore(reducer, applyMiddleware(thunk));

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

app.js組件：

import React, { Component } from 'react';
import { connect } from 'react-redux';

// 異步 ACTION  示例
const delayAdd = () => (dispatch, getState) =>　{
  setTimeout(() => {
    dispatch({ type: 'add' });
  }, 1000);
}

class App extends Component {
  componentDidMount() {
    console.log(this.props)
  }

  render() {
    const { add, minus, dela } = this.props;
    return (
      <div className="App">
        <h2>{this.props.person.name}的年齡為{this.props.person.age}</h2>
        <button onClick={add}>next year</button>
        <button onClick={minus}>prev year</button>
        <button onClick={dela}>delay add</button>
      </div>
    );
  }
}

//  需要渲染的state數(shù)據(jù)

function mapStateToProps(state) {
  return {
    person: state
  }
}

//  修改state的reducers
function mapDispatchToProps(dispatch) {
  return {
    add: () => dispatch({ type: 'add' }),
    minus: () => dispatch({ type: 'minus' }),
    dela: () => dispatch(delayAdd())
  }
}

export default App = connect(mapStateToProps, mapDispatchToProps)(App)

redux.js：

// store 數(shù)據(jù)
const person = {
    name: 'nick',
    age: 18
}

//這是同步action  demo
// const increase = {
//    type: 'add'
// }
// const decrease = {
//    type: 'minus'
// }

//這是reducer
const reducer = (state = person, action) => {
    switch (action.type) {
        case 'add':
        // 返回新的 state tree
            return Object.assign({}, state, state.age += 1);
        case 'minus':
            return Object.assign({}, state, state.age -= 1);
        default:
            return state;
    }
}

export default reducer

詳情 見(jiàn)GitHub： yizeruier1