关于React-Redux的connect, selector, action, reducer, App几个执行顺序
//action
function add(task) {
return {type: ADD_TASK, task};
}
//reducer
function func1(state = [], action) {
if (action.type == ADD_TASK) {
return [...state, action.task];
}
}
function reducer(...args) {
return func1(...args) || func2(...args) || args[0];
}
//App
class App extends Component {
render() {
const {taskList} = this.props;
}
}
// Which props do we want to inject, given the global state
function selector(state = []) {
return {
taskList: state
}
}
export const store = createStore(reducer);
// 包装 component ,注入 dispatch 和 state 到其默认的 connect(select)(App) 中;
export default connect(selector)(App);
初始化顺序:
- createStore
- reducer(state,action)
- connect(selector)App
- selector(state)
- App.render(props:{dispatch,...selector#Return})
事件触发顺序:
- dispatch(action)
- action
- reducer(state,action)
- selector(state)
- App.render(props:{dispatch,...selector#Return})