最近学习react redux,先前看过了几本书和一些博客之类的,感觉还不错,比如《深入浅出react和redux》,《React全栈++Redux+Flux+webpack+Babel整合开发》,《React与Redux开发实例精解》, 个人觉得《深入浅出react和redux》这本说讲的面比较全, 但是 很多都是蜻蜓点水, 不怎么深入。这里简单记录一个redux 的demo, 主要方便以后自己查看,首先运行界面如下:
项目结构如下:
这里我们一共有2个组件,都在components文件夹下面,Picker.js实现如下:
import React from 'react';
import PropTypes from 'prop-types';
function Picker({value, onChange, options}) {
return(
<span>
<h1>{value}</h1>
<select onChange={e=>onChange(e.target.value)} value={value}>
{options.map(o=>
<option value={o} key={o}>{o}</option>
)}
</select>
</span>
);
}
Picker.propTypes = {
options:PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
value:PropTypes.string.isRequired,
onChange:PropTypes.func.isRequired,
};
export default Picker;
这里的onChange事件是传递进来的,最终就是要触发一个action,Posts.js的实现如下:
import React from 'react';
import PropTypes from 'prop-types';
function Posts ({posts}){
return(
<ul>
{
posts.map((p,i)=>
<li key={i}>{p.title}</li>
)
}
</ul>
);
}
Posts.propTypes = {
posts:PropTypes.array.isRequired,
};
export default Posts;
现在来看看actions/index.js的实现:
import fetch from 'isomorphic-fetch';
export const REQUEST_POSTS = 'REQUEST_POSTS';
export const RECEIVE_POSTS = 'RECEIVE_POSTS';
export const SELECT_REDDIT = 'SELECT_REDDIT';
export const INVALIDATE_REDDIT = 'INVALIDATE_REDDIT';
export function selectReddit(reddit){
return{
type:SELECT_REDDIT,
reddit,
};
}
export function invalidateReddit(reddit){
return {
type:INVALIDATE_REDDIT,
reddit,
};
}
export function requestPosts(reddit){
return {
type:REQUEST_POSTS,
reddit,
};
}
export function receivePosts(reddit,json){
return{
type:RECEIVE_POSTS,
reddit,
posts:json.data.children.map(x=>x.data),
receivedAt:Date.now(),
};
}
function fetchPosts(reddit){
return dispatch=>{
dispatch(requestPosts);
return fetch(`https://www.reddit.com/r/${reddit}.json`)
.then(r=>r.json())
.then(j=>dispatch(receivePosts(reddit,j)));
}
}
function shouldFetchPosts(state,reddit){
const posts = state.postsByReddit[reddit];
if(!posts){
return true;
}
if(posts.isFetching){
return false;
}
return posts.didInvalidate;
}
export function fetchPostsIfNeeded(reddit){
return (dispatch,getState)=>{
if(shouldFetchPosts(getState(),reddit)){
return dispatch(fetchPosts(reddit));
}
return null;
};
}
主要是暴露出selectReddit,invalidateReddit,requestPosts,receivePosts和fetchPostsIfNeeded几个action,而fetchPostsIfNeeded才是主要的,首先调用shouldFetchPosts方法来检查是否需要获取数据, 如果是的话就调用fetchPosts方法,而fetchPosts方法返回的是一个function,这里我的项目使用了redux-thunk, 看看redux-thunk的实现如下:
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
所以在fetchPostsIfNeeded中的dispatch(fetchPosts(reddit)) 最终会进入到redux-thunk里面,fetchPosts(reddit)返回的是一个function如下,所以这里会进入这个action里面,也就是 return action(dispatch, getState, extraArgument);
function fetchPosts(reddit){
return dispatch=>{
dispatch(requestPosts);
return fetch(`https://www.reddit.com/r/${reddit}.json`)
.then(r=>r.json())
.then(j=>dispatch(receivePosts(reddit,j)));
}
}
所以在fetchPosts里面的dispatch参数就是redux-thunk里面return action(dispatch, getState, extraArgument) 的dispatch。
在这里的function里面, 一般发起http请求前有一个 状态改变(dispatch(requestPosts);), http请求成功后有一个 状态改变(dispatch(receivePosts(reddit,j))),失败也会有状态改变(这里忽律失败的case)
接下来看看containers\App.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { selectReddit, fetchPostsIfNeeded, invalidateReddit } from '../actions';
import Picker from '../components/Picker';
import Posts from '../components/Posts';
class App extends Component{
constructor(props){
super(props);
this.handleChange=this.handleChange.bind(this);
this.handleRefreshClick=this.handleRefreshClick.bind(this);
}
componentDidMount(){
console.log('执行componentDidMount');
const { dispatch, selectedReddit } = this.props;
dispatch(fetchPostsIfNeeded(selectedReddit));
}
componentWillReceiveProps(nextProps){
console.log('执行componentWillReceiveProps', nextProps);
if(nextProps.selectedReddit !==this.props.selectedReddit)
{
const { dispatch, selectedReddit } = this.props;
dispatch(fetchPostsIfNeeded(selectedReddit));
}
}
handleChange(nextReddit){
this.props.dispatch(selectReddit(nextReddit));
}
handleRefreshClick(e){
e.preventDefault();
const {dispatch, selectedReddit } = this.props;
dispatch(invalidateReddit(selectedReddit));
dispatch(fetchPostsIfNeeded(selectedReddit));
}
render(){
const { selectedReddit, posts, isFetching, lastUpdated } = this.props;
const isEmpty = posts.length === 0;
const message = isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>;
return(
<div>
<Picker value={selectedReddit} onChange={this.handleChange} options={['reactjs', 'frontend']} />
<p>
{ lastUpdated && <span>Last updated at {new Date(lastUpdated).toLocaleDateString()}.</span>}
{!isFetching && <a href="#" onClick={this.handleRefreshClick}>Refresh</a>}
</p>
{isEmpty?message:<div style={{opacity:isFetching?0.5:1}}><Posts posts={posts}/></div>}
</div>
);
}
}
App.propTypes = {
selectedReddit:PropTypes.string.isRequired,
posts:PropTypes.array.isRequired,
isFetching:PropTypes.bool.isRequired,
lastUpdated:PropTypes.number,
dispatch:PropTypes.func.isRequired
};
function mapStateToProps(state){
const { selectedReddit, postsByReddit } = state;
const { isFetching, lastUpdated, items: posts,} = postsByReddit[selectedReddit] || { isFetching: true, items: [], };
return {
selectedReddit,
posts,
isFetching,
lastUpdated,
};
}
export default connect(mapStateToProps)(App);
只是要注意一下componentDidMount方法里面是调用dispatch(fetchPostsIfNeeded(selectedReddit));的,页面加载后就发送默认的http请求。
在来看看reducers\index.js:
import {combineReducers} from 'redux';
import {SELECT_REDDIT,INVALIDATE_REDDIT,REQUEST_POSTS,RECEIVE_POSTS} from '../actions';
function selectedReddit (state='reactjs',action) {
switch(action.type){
case SELECT_REDDIT:
return action.reddit;
default:
return state === undefined ? "" : state;
}
}
function posts(state= { isFetching: false, didInvalidate: false,items: [],}, action){
switch(action.type){
case INVALIDATE_REDDIT:
return Object.assign({},state,{didInvalidate:true});
case REQUEST_POSTS:
return Object.assign({},state,{isFetching:true,didInvalidate:false});
case RECEIVE_POSTS:
return Object.assign({},state,{isFetching:false,didInvalidate:false,items:action.posts,lastUpdated:action.receivedAt});
default:
return state;
}
}
function postsByReddit(state={},action){
switch(action.type){
case INVALIDATE_REDDIT:
case RECEIVE_POSTS:
case REQUEST_POSTS:
return Object.assign({},state,{[action.reddit]:posts(state[action.reddit],action)});
default:
return state === undefined ? {} : state;
}
}
const rootReducer =combineReducers({postsByReddit,selectedReddit});
export default rootReducer;
这里用combineReducers来合并了postsByReddit和selectedReddit两个Reducers,所以每个action都会进入这2个Reducers(也不知道我的理解是否正确),比如action type 是INVALIDATE_REDDIT,selectedReddit 什么都不处理,直接返回state,然而postsByReddit会返回我们需要的state。 还有就是经过combineReducers合并后的数据,原先postsByReddit需要的state现在就只能通过state.postsByReddit来获取了。
还有大家主要到了没有, 这里有return state === undefined ? "" : state; 这样的写法, 那是combineReducers在初始化的时候会传递undefined ,combineReducers->assertReducerShape的实现如下:
所以默认的state传递的是undefined,而我们的reducer也是没有处理ActionTypes.INIT的
现在来看看store/configureStore.js
import {createStore,applyMiddleware,compose} from 'redux';
import thunkMiddleware from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from '../reducers';
export default function configureStore(initialState){
const store=createStore(rootReducer,initialState,compose(
applyMiddleware(thunkMiddleware,logger),
window.devToolsExtension? window.devToolsExtension():f=>f
));
if(module.hot){
module.hot.accept('../reducers',()=>{
const nextRootReducer=require('../reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}
module.hot实在启用了热跟新后才可以访问的。
index.js实现:
import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import App from './containers/App';
import configureStore from './store/configureStore';
const store=configureStore();
render(
<Provider store={store}>
<App />
</Provider>
,document.getElementById('root')
);
server.js实现:
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');
var app= new (require('express'))();
var port= 3000;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {noInfo:true, publicPath:config.output.publicPath}));
app.use(webpackHotMiddleware(compiler));
app.get("/",function(req,res){
res.sendFile(__dirname+'/index.html');
});
app.listen(port,function(error){
if(error){
console.error(error);
}
else{
console.info("==> ? Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
}
});
package.json文件如下:
{
"name": "react-demo",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start":"node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"expect": "^23.6.0",
"express": "^4.16.3",
"node-libs-browser": "^2.1.0",
"webpack": "^4.20.2",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.24.2"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"isomorphic-fetch": "^2.2.1",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
}
}
webpack.config.js:
var path = require("path");
var webpack= require('webpack');
module.exports = {
devtool:'cheap-module-eval-source-map',
entry: ['webpack-hot-middleware/client','./index.js'],
output : {
path:path.join(__dirname,'dist'),
filename:"bundle.js",
publicPath:'/static/'
},
module:{
rules:[
{
test:/\.js$/,
loaders:['babel-loader'] ,
exclude:'/node_modules/',
include:__dirname
}
]
},
plugins:[
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Redux async example</title>
</head>
<body>
<div id="root">
</div>
<script src="/static/bundle.js"></script>
</body>
</html>
.babelrc:
{
"presets": [
"es2015","react"
],
"env":{
"development":{
"presets":["react-hmre"]
}
}
}