一, 智能组件与笨组件
笨组件:
- 只负责 UI 的呈现，不带有任何业务逻辑
- 没有状态（即不使用this.state这个变量）
- 所有数据都由参数（this.props）提供
- 不使用任何 Redux 的 API
智能组件:
- 负责管理数据和业务逻辑，不负责 UI 的呈现
- 带有内部状态
- 使用 Redux 的 API
React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它
二, connect()
connect() 此方法作用是生成智能组件, 在笨组件外层加一个包裹
此智能组件同时担任两个重要的作用
- （1）输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数
- （2）输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。
负责完成这个两个功能的方法分别是,
mapStateToPropsmapDispatchToProps
一个connect方法的完整 API如下:
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
VisibleTodoList 则是由 Redux 生成的智能组件, TodoList 是笨组件.
这里通过 mapStateToProps 把显示数据传入 TodoList, 同时通过 mapDispatchToProps 确定了那些笨组件发起什么样的action, 这里可以是函数, 也可以是对象
三, mapStateToProps
- mapStateToProps 是一个函数,
- 此函数返回一个对象 ,里面的每一个键值对就是一个映射
- 第一个参数为
state对象 , 第二个参数，代表智能组件的props对象- 使用
state对象做参数后, 当state更新时, 会自动执行，重新计算 笨组件的参数，从而触发 笨 组件的重新渲染。- 使用
props对象作为第二个参数时, 当智能组件参数发生变化，也会引发 笨 组件重新渲染
const mapStateToProps = (state, ownProps) => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter),
active: ownProps.filter === state.visibilityFilter
}
}
getVisibleTodos()计算后的结果作为 建 todo的值, 然后传入笨组件
四: mapDispatchToProps()
定义了哪些用户的操作应该当作 Action，传给 Store。
- 它可以是一个函数，也可以是一个对象。
当时一个函数时,
- 返回一个对象, 键值对定义了 UI 组件的参数怎样发出 Action。
- 有两个参数
dispatch发起action的方法 ,props对象智能组件的props的对象
const mapDispatchToProps = ( dispatch, ownProps) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}
当时一个对象时,
它的每个键名也是对应 笨 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由Redux自动发出。
上例可为:
const mapDispatchToProps = {
onClick: (filter) => ({
type: 'SET_VISIBILITY_FILTER',
filter: filter
})
}
<Provider>组件
React-Redux 提供Provider组件，可以让Provider 内的子组件拿到state。
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
子组件就可以通过 const { store } = this.context; 拿到 store,
store.getState() 拿到 state,
class VisibleTodoList extends Component {
......
render() {
const props = this.props;
const { store } = this.context;
const state = store.getState();
// ...
}
}
