react-redux使用小结

• react-redux使用小结
  • react-redux
  • store
  • reducer
  • action
  • 整合storereduceraction
  • 补充
    • 使用redux-dev-tools
    • 让改变reducer后能够即时刷新页面
  • 总结

需要使用的库redux，react-redux，react-router-redux

react-redux

使用一个react-redux 的库使得redux的使用更简洁，它提供了provider和connect方法

先在入口文件内使用

<Provider store={store}>     <组件/>  </provider>
1
2
3

---

store

这里使用了redux中的重要组成部分store，所以下面先说store的文件构成

• 把所有数据取出，如果是静态的就引入json文件，如果是动态的就使用fetch或者ajax加载，来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中，在开发中使用本地的json数据可以加速开发
• 然后使用redux库中的createStore把reducer和上一步的数据实例化出一个store，eg：const store = createStore(rootReducer, defaultState);

这样最简单的store就做好了，然后上面还有reducer需要处理

---

reducer

reducer的简单作用就是根据action的不同跟新state，此处的更新必须是返回一个新的state，而不是在原来的state上做修改

例如：实现一个增加评论和删除评论的功能

//注意此处传的参为state和actionlet 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;    }};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在我们的项目中，我们可能会分模块和功能写多个reducer文件，但最终，我们都需要把它合并到一个里面，这需要使用redex中的combineReducers

import { combineReducers } from "redux";import * as reducers from "./reducers"const rootReducer = combineReducers({    ...reducers});export default rootReducer;
1
2
3
4
5
6

这是通用的用法，而在我学习的视频中，他在combineReducers中还加上了routerReducer，它的具体作用可以看官方文档react-router-redux，反正我是没怎么看懂，具体的作用感觉就是在切换页面的时候会多出一个LOCATION_CHANGE的时间，可以用来追踪页面的变化，具体要使用的话需要更改3个文件，

1. 上面的合并reducers的文件，在引入react-router-redux库的routerReducer方法后，在combineReducers中加上routing: routerReducer
2. 在store.js中加上以下代码

...import { syncHistoryWithStore } from 'react-router-redux';import { browserHistory } from 'react-router';...export const history = syncHistoryWithStore(browserHistory, store);
1
2
3
4
5

　　3.在主入口文件中的<Router>根路由标签使用store.js中导出的history

<Router history={history}>...<Router>
1
2
3

action

action我把它做是一个接口，它主要是和reducer联动的，它默认必须返回一个type，用这个type的值来判断reducer中做哪一步操作 
例如：我需要增加一个评论，那我需要传评论文章的id，评论的用户，评论的内容，所以定义如下

// add commentexport let addComment = (postId, author, text) => {    return {        type: 'ADD_COMMENT',        postId,        author,        text    }};
1
2
3
4
5
6
7
8
9

---

整合store，reducer，action

• 我们的store已经在provider里面传入了，但我们provider内的组件不能直接使用，要使用就必须是connect过的组件，这方面的介绍在React 实践心得：react-redux 之 connect 方法详解这篇文章里有详细说明
• store.js里面我们就把reducer和store的数据进行实例化了，会创建出store的几个默认方法dispatch(),getState(),subscribe()
• 缺少的1、是组件能够调用store内的数据；2、通过store提供的dispatch函数将action发送到reducer，reducer通过一个switch函数处理数据，reducer将数据提供给store，更新state，组件自动刷新

以上还未解决的问题就用connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])来解决，这里我们只使用第一和第二个参数

import { bindActionCreators } from 'redux';import { connect} from 'react-redux';//此处传入的state即为store中的defaultStatelet 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

补充

使用redux-dev-tools

要使用redux的调试工具需要在store.js文件中的createStore()步骤中加入第三个参数，enhancers

import { createStore, compose} from 'redux';//redux-dev-toolsconst enhancers = compose(    window.devToolsExtension ? window.devToolsExtension() : f => f);const store = createStore(rootReducer, defaultState, enhancers);
1
2
3
4
5
6
7

让改变reducer后能够即时刷新页面

webpack可以监听我们的组件变化并做出即时相应，但却无法监听reducers的改变，所以在store.js中增加一下代码

//此处accepts的参数是reducers的存放路径，require()内的路径为执行combineReducers()的文件if(module.hot){    module.hot.accept("./reducers/", () => {        const nextRootReducer = require('./reducers/index').default;        store.replaceReducer(nextRootReducer);    })}
1
2
3
4
5
6
7

总结

经过一次回顾后，感觉比之前只看这视屏照着打要理解得更加深刻，虽然还是会有部分不能融会贯通，但基本的流程是清楚了不少，感觉果然向阮一峰老师的博文中指出使用react很方便，但是redux就不是一定要选择用的，因为它还是存在一定的难度和复杂度的，特别是本身的业务逻辑不多，程序不大的时候

以下贴出其余不错的关于介绍redux和react的相关文章 
React Redux作用流程