redux实例

import React from ‘react‘
import ReactDOM from ‘react-dom‘
import App from ‘./App‘
import {createStore, combineReducers} from ‘redux‘;

// step1: 创建reducers
const reducers = combineReducers({
    films: function(state=[], action) {
        let {type, payload} = action;
        switch(type) {
            case "GET_FILM_DATA":
                var newS = [...state];
                newS = payload;
                return newS;
            default:
                return state;
        }
    }
})

// step:2 创建store
const store = createStore(reducers, {});

// 把store传递给组件
function renderPage() {
    ReactDOM.render(<App store={store} />, document.getElementById(‘root‘));
}
renderPage();

// step3: 注册回调
store.subscribe(renderPage)

import React, { Component } from ‘react‘;
import axios from ‘axios‘;

class App extends Component {
    componentDidMount() {
            var that = this;
            axios.get("/v4/api/film/now-playing?__t=1512647107236&page=1&count=5")
            .then(function(res){
                console.log(res);
                that.props.store.dispatch({
                    type: "GET_FILM_DATA",
                    payload: res.data.data.films
                })
            })
        }
        render() {
            var films = this.props.store.getState().films;
            return (
                <div>
                    <ul>
                        {
                            films.map((item, index)=>{
                                return <li key={item.id}>
                                    <h2>{item.name}</h2>
                                    <img src={item.cover.origin} />
                                </li>;
                            })
                        }
                    </ul>
                </div>
            )
        }
       }

export default App;

"proxy": {
    "/v4": {
      "target": "https://m.maizuo.com",
      "changeOrigin": true,
      "pathRewrite": {
        "^/v4": "/v4"
      },
      "ws": true
    }
  }