redux，react-redux、redux-thunk、redux-logger、redux-promise实例

使用的是create-react-app脚手架

package.json增加反向代理

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

redux实例：

src/index.js

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)

src/App.js

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;

react-redux、redux-logger、redux-thunk实例

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {createStore, combineReducers, applyMiddleware} from 'redux';
import logger from 'redux-logger';
import ReduxThunk from 'redux-thunk';
import {Provider} from 'react-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, {}, applyMiddleware(ReduxThunk, logger));

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

src/App.js

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

//UI组件
class AppUI extends Component {
    componentDidMount() {
        this.props.getFilmData();
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.props.films.map((item, index)=>{
                            return <li key={item.id}>
                                <h2>{item.name}</h2>
                                <img src={item.cover.origin} />
                            </li>;
                        })
                    }
                </ul>
            </div>
        )
    }
}

// mapStateToProps
const mapStateToProps =(state)=> {
    return {
        films: state.films
    }
}

// mapDispatchToProps
const mapDispatchToProps =(dispatch)=> {

    return {
        getFilmData: function() {
            //因为使用了thunk中间件，dispatch可传入回调函数
            dispatch(function(dispatch){
                axios.get("/v4/api/film/now-playing?__t=1512647107236&page=1&count=5")
                .then(function(res){
                    console.log(res);
                    dispatch({
                        type: "GET_FILM_DATA",
                        payload: res.data.data.films
                    })
                })
            });
        }
    }
}

// connect
const App = connect(mapStateToProps, mapDispatchToProps)(AppUI);
export default App;

react-redux、redux-logger、redux-promise实例

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {createStore, combineReducers, applyMiddleware} from 'redux';
import logger from 'redux-logger';
import ReduxPromise from 'redux-promise';
import {Provider} from 'react-redux';

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

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

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

src/App.js

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

//UI组件
class AppUI extends Component {
    componentDidMount() {
        this.props.getFilmData();
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.props.films.map((item, index)=>{
                            return <li key={item.id}>
                                <h2>{item.name}</h2>
                                <img src={item.cover.origin} />
                            </li>;
                        })
                    }
                </ul>
            </div>
        )
    }
}

// mapStateToProps
const mapStateToProps =(state)=> {
    return {
        films: state.films
    }
}

// mapDispatchToProps
const mapDispatchToProps =(dispatch)=> {
    return {
        getFilmData: function() {
            var promise = new Promise(function(resolve, reject){
                axios.get("/v4/api/film/now-playing?__t=1512647107236&page=1&count=5")
                .then(function(res){
                    resolve(res.data.data.films);
                })
            })
            dispatch({ //redux-promise中间件使得redux可以处理promise对象
                type: "GET_FILM_DATA",
                payload: promise
            })
        }
    }
}

// connect
const App = connect(mapStateToProps, mapDispatchToProps)(AppUI);
export default App;

react中怎么做到如vue中keep-alive的效果？

vue中keep-alive是将组将存入内存，实质上我们想要是保留state，因此可以用redux保存要 keep-alive的组件状态值即可