需要使用的库redux,react-redux,react-router-redux
使用一个react-redux 的库使得redux的使用更简洁,它提供了provider和connect方法
先在入口文件内使用
<组件/> provider>
这里使用了redux中的重要组成部分store,所以下面先说store的文件构成
const store = createStore(rootReducer, defaultState);
这样最简单的store就做好了,然后上面还有reducer需要处理
reducer的简单作用就是根据action的不同跟新state,此处的更新必须是返回一个新的state,而不是在原来的state上做修改
例如:实现一个增加评论和删除评论的功能
//注意此处传的参为state和action
let postComments = (state = [], action) => {
switch (action.type){
case "ADD_COMMENT":
return [
...state, //原来的state
{
user: action.author,增加的state
text: action.text
}
];
case "REMOVE_COMMENT":
return [
...state.slice(0,action.i), //剔除数组中需要删除的那个
...state.slice(action.i + 1)
];
default:
return state;
}
};
在我们的项目中,我们可能会分模块和功能写多个reducer文件,但最终,我们都需要把它合并到一个里面,这需要使用redex中的combineReducers
import { combineReducers } from "redux";
import * as reducers from "./reducers"
const rootReducer = combineReducers({
...reducers
});
export default rootReducer;
这是通用的用法,而在我学习的视频中,他在combineReducers中还加上了routerReducer,它的具体作用可以看官方文档react-router-redux,反正我是没怎么看懂,具体的作用感觉就是在切换页面的时候会多出一个LOCATION_CHANGE的时间,可以用来追踪页面的变化,具体要使用的话需要更改3个文件,
routing: routerReducer
...
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';
...
export const history = syncHistoryWithStore(browserHistory, store);
3.在主入口文件中的
根路由标签使用store.js中导出的history
...
action我把它做是一个接口,它主要是和reducer联动的,它默认必须返回一个type,用这个type的值来判断reducer中做哪一步操作
例如:我需要增加一个评论,那我需要传评论文章的id,评论的用户,评论的内容,所以定义如下
// add comment
export let addComment = (postId, author, text) => {
return {
type: 'ADD_COMMENT',
postId,
author,
text
}
};
以上还未解决的问题就用connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
来解决,这里我们只使用第一和第二个参数
import { bindActionCreators } from 'redux';
import { connect} from 'react-redux';
//此处传入的state即为store中的defaultState
let mapStateToProps = (state) => {
return{
posts: state.posts,
comments: state.comments
}
};
//此处的actionCreators即为简单的action文件
//Redux 本身提供了 bindActionCreators 函数,来将 action 包装成直接可被调用的函数
let mapDispatchToProps = (dispatch) => {
return bindActionCreators(actionCreators, dispatch);
};
//最后调用connect()
const App = connect(mapStateToProps, mapDispatchToProps)(Main);
export default App;
要使用redux的调试工具需要在store.js文件中的createStore()步骤中加入第三个参数,enhancers
import { createStore, compose} from 'redux';
//redux-dev-tools
const enhancers = compose(
window.devToolsExtension ? window.devToolsExtension() : f => f
);
const store = createStore(rootReducer, defaultState, enhancers);
webpack可以监听我们的组件变化并做出即时相应,但却无法监听reducers的改变,所以在store.js中增加一下代码
//此处accepts的参数是reducers的存放路径,require()内的路径为执行combineReducers()的文件
if(module.hot){
module.hot.accept("./reducers/", () => {
const nextRootReducer = require('./reducers/index').default;
store.replaceReducer(nextRootReducer);
})
}
经过一次回顾后,感觉比之前只看这视屏照着打要理解得更加深刻,虽然还是会有部分不能融会贯通,但基本的流程是清楚了不少,感觉果然向阮一峰老师的博文中指出使用react很方便,但是redux就不是一定要选择用的,因为它还是存在一定的难度和复杂度的,特别是本身的业务逻辑不多,程序不大的时候
以下贴出其余不错的关于介绍redux和react的相关文章
React Redux作用流程
深入到源码:解读 redux 的设计思路与用法