1.发起 action
2.通过reducer ,产生新的state,combineReducers 用来合成
3.Store:Store 就是把它们联系到一起的对象* 维持应用的 state;
- 提供
getState()
方法获取 state; - 提供
dispatch(action)
方法更新 state; - 通过
subscribe(listener)
注册监听器; - 通过
subscribe(listener)
返回的函数注销监听器。
3.1 创建 store
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
4.容器组件
4.1使用 connect() 前,需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中
4.2定义 mapDispatchToProps()方法注入action
4.3生成容器组件
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
5.异步action
通过使用指定的 middleware,action 创建函数除了返回 action 对象外还可以返回函数
我们使用了 applyMiddleware()
在dispatch 机制中引入 Redux Thunk middleware
默认情况下,createStore()
所创建的 Redux store 没有使用 middleware,所以只支持 同步数据流。
你可以使用 applyMiddleware()
来增强 createStore()
。虽然这不是必须的,但是它可以帮助你用简便的方式来描述异步的 action。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/rootReducer';
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
let store = createStoreWithMiddleware(rootReducer);
// let state = store.getState();
// alert(state.Search.searchText)
export default store;
网友评论