redux常用的几个函数

1.createStore(reducer, [initState, enhancer])

  • 作用:创建一个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. 和connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options])

使组件层级中的 connect()方法都能够获得 Redux store。正常情况下,根组件应该嵌套在 中才能使用 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)
  }
}

链接:http://www.jianshu.com/p/a8e8e49c82e7
來源:简书

### Redux 参数详解及功能 Redux 是一个用于状态管理的 JavaScript 库,它提供了一种集中式的方式来管理应用的状态。以下是 Redux 中的主要参数及其用途的详细说明: #### 1. `store` `store` 是 Redux 中的核心概念之一,它是应用中唯一的状态树的容器。通过 `createStore` 方创建,`store` 负责保存整个应用的状态,并提供来访问更新这些状态[^3]。 - **`getState()`**: 返回当前的 state 树。 - **`dispatch(action)`**: 触发一个 action 来更新 state。 - **`subscribe(listener)`**: 注册一个监听器,当 state 发生变化时调用该监听器。 ```javascript const store = createStore(reducer); console.log(store.getState()); // 获取当前状态 store.dispatch({ type: 'INCREMENT' }); // 分发一个 action ``` #### 2. `reducer` `reducer` 是一个纯函数,接收当前的 state action,返回新的 state。它是 Redux 中状态更新的核心逻辑所在[^3]。 - **参数**: - `state`: 当前的状态。 - `action`: 描述如何更新状态的对象。 - **返回值**: 新的状态。 ```javascript function counterReducer(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } ``` #### 3. `action` `action` 是一个普通的 JavaScript 对象,用于描述发生的事情。它是触发状态更新的唯一方式[^3]。 - **结构**: - 必须包含一个 `type` 属性,表示 action 的类型。 - 可以包含其他任意属性,传递额外的数据。 ```javascript const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; ``` #### 4. `middleware` 中间件用于扩展 Redux 的功能,例如处理异步操作、记录日志等。`redux-thunk` 就是一个常见的中间件,允许在 action 创建函数中返回一个函数,从而支持异步逻辑[^1]。 - **工作原理**: 中间件可以拦截每个 `dispatch` 调用,在真正到达 reducer 之前对 action 进行处理[^2]。 - **参数**: 中间件函数通常接收三个参数: - `dispatch`: 用于分发新的 action。 - `getState`: 获取当前的 state。 - `extraArgument`: 可选参数,用于传递额外的信息。 ```javascript const thunkMiddleware = ({ dispatch, getState }) => next => action => { if (typeof action === 'function') { return action(dispatch, getState); } return next(action); }; ``` #### 5. `combineReducers` 当应用的状态被分割成多个子模块时,`combineReducers` 函数可以将多个 reducer 合并成一个单一的 reducer。 ```javascript import { combineReducers } from 'redux'; const rootReducer = combineReducers({ counter: counterReducer, user: userReducer, }); ``` --- ### 示例代码:完整 Redux 流程 以下是一个完整的 Redux 示例,展示了上述参数的使用方式。 ```javascript // 定义 action 类型 const INCREMENT = 'INCREMENT'; const DECREMENT = 'DECREMENT'; // 定义 action 创建函数 function increment() { return { type: INCREMENT }; } function decrement() { return { type: DECREMENT }; } // 定义 reducer function counterReducer(state = 0, action) { switch (action.type) { case INCREMENT: return state + 1; case DECREMENT: return state - 1; default: return state; } } // 创建 store import { createStore, applyMiddleware } from 'redux'; import thunkMiddleware from 'redux-thunk'; const store = createStore( counterReducer, applyMiddleware(thunkMiddleware) ); // 订阅状态变化 store.subscribe(() => console.log('State:', store.getState())); // 分发 action store.dispatch(increment()); store.dispatch(decrement()); // 使用 redux-thunk 处理异步 action store.dispatch((dispatch) => { setTimeout(() => { dispatch(increment()); }, 1000); }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值