使用的是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的组件状态值即可