一: 基本概念说明:
- Store ( 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。)
- State ( Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。
当前时刻的state,可以通过store.getState()拿到。) - Action ( State 的变化,会导致 View 的变化。Action 就是 View 发出的通知,表示 State 应该要发生变化了。)
- store.dispatch()是 View 发出 Action 的唯一方法。
- Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。 - Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数,这时候就可以触发重新渲染view。
- 关于redux的异步操作:
class AsyncApp extends Component {
componentDidMount() {
const { dispatch,selectedPost } = this.props
dispatch(fetchPosts(selectedPost))
}
const fetchPosts = postTitle => (dispatch,getState) => {
dispatch(requestPosts(postTitle));
return fetch(`/some/API/${postTitle}.json`)
.then(response => response.json())
.then(json => dispatch(receivePosts(postTitle,json)));
};
};
- connect 用于从ui组件生成容器组件。
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,//输入逻辑,即将state映射到ui组件的参数(props),每当state更新的时候,就会自动执行,重新计算ui组件的参数,从而触发ui组件的重新渲染;
mapDispatchToProps //输出逻辑,用来建立ui组件的参数到store.dispatch方法的映射;
)(TodoList)
二:工作流程
好文推荐: