react-redux 之 provider 和 connect
1.Provider
提供的是一个顶层容器的作用，实现store的上下文传递
2.connect
可以把state和dispatch绑定到react组件，使得组件可以访问到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就不是一定要选择用的，因为它还是存在一定的难度和复杂度的，特别是本身的业务逻辑不多，程序不大的时候