使用的是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: 创建reducersconst 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 创建storeconst store = createStore(reducers, {});// 把store传递给组件function renderPage() { ReactDOM.render( 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 ( { films.map((item, index)=>{ return -
{item.name}
; }) }
) } }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: 创建reducersconst 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 创建storeconst store = createStore(reducers, {}, applyMiddleware(ReduxThunk, logger));// 把store传递给组件ReactDOM.render( , 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 ( { this.props.films.map((item, index)=>{ return -
{item.name}
; }) }
) }}// mapStateToPropsconst mapStateToProps =(state)=> { return { films: state.films }}// mapDispatchToPropsconst 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 }) }) }); } }}// connectconst 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: 创建reducersconst 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 创建storeconst store = createStore(reducers, {}, applyMiddleware(ReduxPromise, logger));// 把store传递给组件ReactDOM.render( , 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 ( { this.props.films.map((item, index)=>{ return -
{item.name}
; }) }
) }}// mapStateToPropsconst mapStateToProps =(state)=> { return { films: state.films }}// mapDispatchToPropsconst 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 }) } }}// connectconst App = connect(mapStateToProps, mapDispatchToProps)(AppUI);export default App; react中怎么做到如vue中keep-alive的效果？
vue中keep-alive是将组将存入内存，实质上我们想要是保留state，因此可以用redux保存要 keep-alive的组件状态值即可