react-redux使用小结

react-redux使用小结

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

react-redux

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

先在入口文件内使用

<Provider store={store}>
     <组件/>  
</provider>

---

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和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个文件，

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);

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

<Router history={history}>
...
<Router>

action

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

// add comment
export let addComment = (postId, author, text) => {
    return {
        type: 'ADD_COMMENT',
        postId,
        author,
        text
    }
};

---

整合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中的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-dev-tools

要使用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);

让改变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);
    })
}

总结

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

以下贴出其余不错的关于介绍redux和react的相关文章
React Redux作用流程
深入到源码：解读 redux 的设计思路与用法