react之redux全局状态管理

npm install redux --save-dev

项目目录

src
	store
		action.js
		reducer.js
		state.js
		store.js
	App.js
	components
		son.js

APP.js

import React, { Component } from 'react';
import Son from './components/son';
import store from './store/store'
import action from './store/action'
class App extends Component {
  constructor(props){
    super(props)
    this.state={...store.getState()}//解构全局状态值
  }
  componentWillMount(){
    //store.subscribe(()=>{
      //this.setState({});
    //})
  }
  add(){
    action.change(++this.state.value);//用户触发action中的方法
    this.setState({})//或者采用上面注释的方法
  }
  render() {
    return(
      <div>
        {this.state.value}
        <br/>
        {store.getState().value}
        <br/>
        <Son value={this.add.bind(this)}></Son>
      </div>
    )
  }
}

export default App;

son.js

import React, { Component } from 'react';

class Son extends Component {
  render() {
    return(
      <button onClick={()=>{this.props.value()}}>增加</button>
    )
  }
}

export default Son;

store.js

import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)  //创建全局状态对象
export default store

reducer.js
修改全局状态值
通过reducer来修改全局状态

import state from './state' 
export default (prevdata=state,action)=>{
  let newData = {...prevdata};
  let type = action.type;
  switch(type){
    case 'CHANGE_VALUE':
      newData.value = action.value
      break;
  }
  return newData
}

state.js
创建全局状态值

export default {
  value : 1
}

action.js
将其抛出到view,让用户来做触发action的方法来触发reducer.js

import store from './store'
export default {
  change(value){
    var data = {
      type : 'CHANGE_VALUE',
      value
    }
    store.dispatch(data)
  }
}