redux配合react

基本流程如下：

第一步：安装

npm install --save reduxnpm 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);