react和redux中的几种常用的方法
来源:互联网 发布:c语言随机函数怎么用 编辑:程序博客网 时间:2024/05/02 04:20
1. createStore(reducer, [initState, enhancer])------redux中的方法
- 作用:创建一个Redux store来存放应用中所有的state,一个应用只能有个store。函数返回store对象。
- 参数:
- reducer(Function):两个参数:state和action,返回一个state。 不要对参数state进行修改,需要返回一个新的对象。
- initStatate:初始state。如果不为空,需要和reducer中处理的state结构一致
- enhancer:一个中间件,如logger等。
例如:
import { createStore, applyMiddleware, compose } from 'redux'import thunk from 'redux-thunk'import createLogger from 'redux-logger'import api from '../middleware/api'import rootReducer from '../reducers'import DevTools from '../containers/DevTools'export default function configureStore(preloadedState) { const store = createStore( rootReducer, preloadedState, compose( applyMiddleware(thunk, api, createLogger()), DevTools.instrument() ) ) return store}
2. Store
Store是用来维持应用所有state树的一个对象。改变state的唯一方法是store dispatch一个action。
Store不是类,而只是一个有几个方法的对象,可以采用createStore进行创建。
- getState()
返回应用当前的 state 树。它与 store 的最后一个 reducer 返回值相同。 - dispatch(action)
分发action,这是改变state的唯一方法。 - subscribe(listener)
添加一个变化监听器,每当 dispatch action 的时候就会执行,state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。函数返回一个解绑的函数。可以参考counter-vanilla - replaceReducer(nextReducer)
替换Reducer,用处较少。// 渲染和订阅渲染function render() { valueEl.innerHTML = store.getState().toString()}store.subscribe(render)
3. combineReducers(reducers)
combineReducers辅助函数的作用是,把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore。
多个子reducer函数合并后,相当于整体函数会为state特定字段进行映射产生特定的reducer函数。 如页面中的例子;todos和counter只会处理对应字段过来的action。
4. applyMiddleware(...middlewares)
输入一个middlewares数组,返回一个函数,函数以createStore为参数:
export default function applyMiddleware(...middlewares) { return (createStore) => (reducer, preloadedState, enhancer) => { var store = createStore(reducer, preloadedState, enhancer) var dispatch = store.dispatch var chain = [] var middlewareAPI = { getState: store.getState, dispatch: (action) => dispatch(action) } chain = middlewares.map(middleware => middleware(middlewareAPI)) dispatch = compose(...chain)(store.dispatch) return { ...store, dispatch } }}
使用示例:
import { createStore, applyMiddleware } from 'redux'import todos from './reducers'function logger({ getState }) { return (next) => (action) => { console.log('will dispatch', action) // 调用 middleware 链中下一个 middleware 的 dispatch。 let returnValue = next(action) console.log('state after dispatch', getState()) // 一般会是 action 本身,除非 // 后面的 middleware 修改了它。 return returnValue }}let createStoreWithMiddleware = applyMiddleware(logger)(createStore)let store = createStoreWithMiddleware(todos, [ 'Use Redux' ])
每个 middleware 接受 Store 的 dispatch 和 getState 函数作为命名参数,并返回一个函数。该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法,并返回一个接收 action 的新函数,这个函数可以直接调用next(action),或者在其他需要的时刻调用,甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数,并借此结束调用链。所以,middleware 的函数签名是 ({ getState, dispatch }) => next => action。
5. bindActionCreators(actionCreators,dispatch)
经过bindActionCreators处理的actions,直接调用函数而不需调用dispatch即可触发state的改变。
可以参考文章。
6. compose(...functions)
从右到左来组合多个函数。
这是函数式编程中的方法,为了方便,被放到了 Redux 里。 当需要把多个 store 增强器 依次执行的时候,需要用到它。
参考文章:文章
7. <Provider store>和connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options])
<Provider store>使组件层级中的 connect()方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 <Provider>中才能使用 connect()方法。
ReactDOM.render( <Provider store={store}> <MyRootComponent /> </Provider>, rootEl);
connect: 连接 React 组件与 Redux store。
// mapStateToProps: 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的?function mapStateToProps(state) { return { todos: state.todos }}
// mapDispatchToProps: 哪些 action 创建函数是我们想要通过 props 获取的?function mapDispatchToProps(dispatch) { return { actions: bindActionCreators(TodoActions, dispatch) }}
mergeProps和options: 再议
- react和redux中的几种常用的方法
- React和Redux的连接react-redux
- React和Redux的连接react-redux
- React和Redux的连接react-redux
- React和Redux的连接react-redux
- React和Redux的连接react-redux
- React和Redux的连接react-redux
- React和Redux的连接react-redux
- react-redux的connect()方法
- React和Redux的连接react-redux【转载】
- react-redux中的connect方法解析
- react-redux的connect()方法 学习笔记
- react中react-redux和react-router4.*的配合使用
- react-redux中的<Provider>
- React+Redux中的MVC
- 图解 redux 和 react 的关系
- 图解 redux 和 react 的关系
- Redux和React组件的异步交互
- R语言学习笔记(五)
- 项目开发任务及流程记录
- 网络编程(上)
- [JQuery $()XXXX is not a function] 已解决
- VMWare 12 Pro 安装 MAC OS Sierra
- react和redux中的几种常用的方法
- achartengine多柱状图(自定义X轴显示参数)
- 在winform中使用进度条显示任务的执行进度
- java的IO流,当时Sun为什么起名叫流?
- 配置 maven 出现的问题Error: JAVA_HOME not found in your environment.
- 实验三:Huffman编码
- Water Gate Management(二进制枚举组合排列模板 n个数的子集)
- Linux 系统启动详解
- APUE上对进程终止的讨论