redux + react-redux使用，附带一个Demo

加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！

redux + react-redux使用redux中文文档

• GIT仓库demo地址

Why？ 为什么要用redux？

解决react组件间传值，并且要状态动态更新麻烦的问题。redux就是个中央仓库，将数据存在了一个地方，而且只能通过定义了的方法来更改，保证了数据的唯一性和稳定性

一、安装

npm install redux --save

• 如果只用redux的话，那么状态更改了，只能通过subscribe的回调中得到新的状态，那么还是一样繁琐，所以一般与react-redux一起使用

npm install react-redux --save

• react-redux中的Provider组件，redux生成的store传入就能传递到每个组件中，react-redux的Provider就是如下实现的

class Provider extends Component {
  getChildContext() {
    return {
      store: this.props.store
    };
  }
  render() {
    return this.props.children;
  }
}

Provider.childContextTypes = {
  store: React.PropTypes.object
}

二、编写Reducer

// /store/counter.js
const counter =  (state, action) => {
  if (typeof state === 'undefined') {
    return 0
  }
  switch (action.type) {
    case 'add':
      return state + 1
    case 'reduce':
      return state - 1
    case 'set':
      return action.value
    default:
      return state
  }
}

export default counter;

三、创建store并绑定到Provider上

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counter from './store/counter.js'

const store = createStore(counter)

import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

四、在组件中得到state，并dispatch

• 使用react-redux的connect，将Provider的store中的state和需要的dispatch连接到现在的组件，那么在组件中就能直接使用this.prop访问到属性和方法

import React, { Component } from 'react'
import  './Detail.css'
import { connect } from 'react-redux'

class Detail extends Component{
  constructor(props){
    super(props)
    this.state = {
      styleObj: { background: '#00bcd4' }
    }
  }
  render(){
    return(
      <div className="detail" style={this.state.styleObj}>
        <h4>{this.props.myInfo.name}</h4>
        <p onClick={() => this.props.add()}>设置名字</p>
      </div>
    )
  }
  componentWillMount(){
    console.log(this.props.counter)
  }
}

const mapStateToProps = state => {
  return {
    counter: state
  }
}

const mapDispatchToProps = dispatch => {
  return{
    add() {
      dispatch({ type: 'add' })
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail)

五、参考文献

• 阮一峰Redux 入门教程（三）

• 真铁头娃redux和react-redux小记