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;

View Code

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;

View Code

 react中怎麼作到如vue中keep-alive的效果？

vue中keep-alive是將組將存入內存，實質上咱們想要是保留state，所以能夠用redux保存要 keep-alive的組件狀態值便可