redux 项目搭建

环境目录

• Routes.js （这里放置路由组件，同时使用redux 将所有组件包裹起来，形成一个state树, 数据放在store中）
• redux
  • reducer
    • number.js （其中一个reducer）
    • index.js （ ....combineReducers, 统一所有reducer到一个入口）
  • action （ 放置一些通用的方法，在这里可以使用dispatch触发一些函数）
  • 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函数都集中到这里
  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，在这里被执行的原因是我们使用了中间件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);