Redux核心概念
- 整个应用的状态(State)都放在Store中,组件每次的重新渲染都必然由状态变化引起
- 该状态变化便是用户在UI上发出的Action
- 然后Reducer通过接收Action和当前State,输出新的State
Action
action本质上是一个js对象,用来描述用户的操作,一般而言aciton应该包含将要执行的动作和有效载荷(因为action是store数据的唯一来源)
const GET_ELYS = 'GET_ELYS'
/*
action类型,也就是将要执行的动作
这并非是必须定义的,只是在构建大型应用时能有效减少样板代码
*/
{
type: GET_ELYS,
text: 'Get one Elys'
}
/*
包含将要执行的动作和有效载荷的完整action
这里的有效载荷包括actiontype,index,text或是其他什么别的数据
*/
ActionCreator
ActionCreator即Action创建函数,也就是生成action的方法
function getElys(text) {
return {
type: GET_ELYS,
text
}
}
/*通过传入数据返回一个action对象*/
在Redux中,只需要把Action创建函数的结果传递给dispatch()方法即可发起一次dispatch过程
dispatch(getElys(text))
不过多数情况下,使用react-redux提供的connect()来调用更好,同时使用bindActionCreators()可以自动将多个Action创建函数绑定到dispatch()
Reducer
负责接收action和state并且返回新的state
function reducer(state = {
text: '你好，访问者',
name: '访问者'
}, action) {
switch (action.type) {
case 'change':
return {
name: action.payload,
text: '你好，' + action.payload
};
}
}
Store
保存整棵应用树的所有state,由Redux提供的createStore方法生成
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.body.appendChild(document.createElement('div'))
);
/*通过中间件创建Store*/
var initState = {
todo: {
list: []
}
}
const logger = createLogger()
const createStoreWithMiddleware = applyMiddleware(
thunk,
logger
)(createStore)
/*加入中间件创建Store*/
let store = createStoreWithMiddleware(reducer, initState)
展示组件和容器组件
展示组件
展示组件是用来描述如何展现的组件,她的数据来源是基于props,可以从prosp调用回调函数进行数据修改,同时也是纯组件,即不包含任何的状态(this.state)
<div className="index">
<p>{this.props.text}</p>
<input
defaultValue={this.props.name}
onChange={this.props.onChange}/*监听*/
/>
</div>
/*初始化组件数据*/
constructor(props) {
super(props);
var defaultState = {
text: ""
}
this.state = defaultState
}
容器组件
进行数据处理,包含状态更新的组件便是容器组件,在Redux中使用connect方法,自动生成展示组件对应的容器组件
// MyComponent 是纯的 UI 组件
const App = connect(
mapStateToProps,
mapDispatchToProps
)(MyComponent);
中间件
- 中间件提供一个位于action被dispatch后,但尚未被reducer接收之前的拓展点
- 可以利用Redux middleware来进行日志记录,创建崩溃报告,调用异步接口或路由等等
connect
语法
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
connect用于连接React组件和Redux store,返回一个新的与Redux store连接的组件
未完待续
