最近学习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 === ;
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:}}><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';
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= ;
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("==>