redux配合react

基本流程如下：

第一步：安装

npm install --save redux
npm install --save react-redux

第二步：编写reducer

/*下面这个方法是一个Reducer函数*/
//默认值
const defaultState = {
    userName:'lucyss',
};
function reducer(state = defaultState,action){
    switch (action.type){
        case 'A':
            return Object.assign({}, state, {
                userName: action.userName
            }
        );
        case 'login':
            return Object.assign({},state,{
                userName: action.userName
            });
        default:
            return state;
    }
}

第三步：注入到index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import reducer from './reducer/index'

let store = createStore(reducer);


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

第四步：从redux中取值以及设值

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

class App extends Component {
    clickHandle = ()=>{
        this.props.dispatch({
            type:'A',
            userName:'K'
        })
    };
    render() {
    return (
      <div className="App">
          <p>{this.props.userName}</p>
          <button onClick={this.clickHandle}>Click</button>
      </div>
    );
    }
}
function select(state){
    return{
        userName:state.userName
    }
}
export default connect(select)(App);