環(huán)境目錄

• Routes.js （這里放置路由組件，同時使用redux 將所有組件包裹起來，形成一個state樹, 數(shù)據(jù)放在store中）
• redux
  • reducer
    • number.js （其中一個reducer）
    • index.js （ ....combineReducers, 統(tǒng)一所有reducer到一個入口）
  • action （ 放置一些通用的方法，在這里可以使用dispatch觸發(fā)一些函數(shù)）
  • store.js ( 引入reducer和其他一些中間件)
• App.js ( 組件)

Routes.js

import React from 'react'
import App from './App'
import { Provider } from 'react-redux'
import Store  from './redux/store'

const Routes = () =>(
  <Provider store={Store}>
    <App />
  </Provider>
)


export default Routes

store.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import logger from 'redux-logger';

import rootReducer from './reducer/index';

 const Store = createStore(
  rootReducer,       //所有reducers方法的集合
  applyMiddleware(promiseMiddleware(), thunk, logger)  //引入中間件
);

export default Store;

reducer/index

import { combineReducers } from 'redux';
import Numbers from './number';
import Age from './age';

const rootReducer = combineReducers({    //把所有reducer函數(shù)都集中到這里
  Numbers,
  Age
});


export default rootReducer

reducer/age

const initState = {age: 1, count: 100}

function Age(state = initState, action){
  switch(action.type){
    case 'ADD_AGE_FULFILLED':   //在后文中，我們的action.type是ADD_AGE，在這里被執(zhí)行的原因是我們使用了中間件redux-promsie-middleware 的原因
    return {...state, age:state.age+1 }
    case 'SUB_AGE':
    return { ...state, age:state.age-1 }
    default:
    return state
  }
}


export default Age

reducer/numer

const initState = {num: 1}

function Numbers(state = initState, action){
  return state
}


export default Numbers

App.js

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

import './App.css';

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

  add = (val) =>{ this.props.dispatch( {   //測試  redux-promise-middleware
     type:"ADD_AGE" ,
     payload: new Promise(reslove => setTimeout(() => reslove(), 5000))
   })
  }

  inc = () =>{ this.props.dispatch( { type:"SUB_AGE" } ) }

  render() {
    const { age, count } = this.props.age
    return (
      <div className="App">
            <span>{ age }</span>
            <button onClick={this.add.bind(this, age)} key = {1}>+</button>
            <button onClick={this.inc.bind(this)} key = {2}>-</button>
            <span>{ count }</span>
      </div>
    );
  }
}


function mapStateToProps(state){  //從store中取出想要的值
  return  { age: state.Age }
}

export default connect(mapStateToProps)(App);