react&redux基础
原理:
本案例以一个提到TODOLIST为案例。 Action在 我们约定, 比如添加 const ADD_TODO = 'ADD_TODO' { type: ADD_TODO,text: 'Build my first Redux app' } 这个动作需要改变哪些属性就传递这些属性。 创建函数如果有多个数据是同样的动作,那么我们就需要一个通用的函数来传递数据。在 //actions export const ADD_TODO = 'ADD_TODO' export function addTodo(text) { return { type: ADD_TODO,text } } 或者 //actions export const ADD_TODO = 'ADD_TODO' export const addTodo = (text) => { return { type: ADD_TODO,text } } 在组件的事件中, dispatch(addTodo(text)) 或者 const boundAddTodo = (text) => dispatch(addTodo(text)) boundAddTodo(text); bindActionCreators如上所示,我们每次都需要调用时dispatch这个action。 在 React 组件中,如果你希望让组件通过调用函数来更新 state,可以通过使用 const actions = bindActionCreators(FilmActions,dispatch); 将 actions 和 dispatch 揉在一起,成为具备操作 store.state 的 actions。 ReducerAction 只是描述了有事情发生了这一事实,并没有指明应用如何更新 state。而这正是 reducer 要做的事情。 当明确action的任务,就可以开始编写 reducer,并让它来处理之前定义过的 action。 //reducers import { addTodo,ADD_TODO } from './actions' function todoApp(state = initialState,action) { switch (action.type) { case ADD_TODO: return Object.assign({},state,{ text: action.text }) default: return state } } 注意:
combineReducerscombineReducers() 所做的只是生成一个函数,这个函数来调用你的一系列 reducer,每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理,然后这个生成的函数再将所有 reducer 的结果合并成一个大的对象。 import { combineReducers } from 'redux'; const todoApp = combineReducers({ todoApp }) export default todoApp; Store
我们使用 import { createStore } from 'redux' import todoApp from './reducers' let store = createStore(todoApp) Middleware
import createLogger from 'redux-logger'; import { createStore,applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import reducers from './reducers'; const logger = createLogger(); let thunkStore = applyMiddleware(thunk,logger)(createStore); let store = thunkStore(reducers); connectconnect(mapStateToProps,mapDispatchToProps,mergeToProps)(App); 第一个函数接收store中state和props,使页面可以根据当前的store中state和props返回新的 const mapStateToProps = (state,ownProps) => { return { active: ownProps.filter === state.visibilityFilter } } const mapDispatchToProps = (dispatch,ownProps) => { return { onClick: () => { dispatch(setVisibilityFilter(ownProps.filter)) } } } const FilterLink = connect( mapStateToProps,mapDispatchToProps )(Link) Provider<Provider store> 使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 <Provider> 中才能使用 connect() 方法。
Connect 组件需要 store。这个需求由 Redux 提供的另一个组件 Provider 来提供。源码中,Provider 继承了 React.Component,所以可以以 React 组件的形式来为 Provider 注入 store,从而使得其子组件能够在上下文中得到 store 对象。 <Provider store={store}> <App/> </Provider> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |