以正确的方式发送动作

Question

请检查编辑

我正在尝试在我的应用程序中实现 sagas。

现在我正在以非常糟糕的方式获取道具。我的应用程序主要由来自其他来源的轮询数据组成。

目前，我的应用程序是这样工作的：

我有容器，其中有 mapStateToProps、mapDispatchToProps。

const mapStateToProps = state => {
  return {
    someState: state.someReducer.someReducerAction,
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({someAction, someOtherAction, ...}, dispatch)
};

const something = drizzleConnect(something, mapStateToProps, mapDispatchToProps);

export default something;

然后，我有 actions，像这样：

import * as someConstants from '../constants/someConstants';

export const someFunc = (someVal) => (dispatch) => {
    someVal.methods.someMethod().call().then(res => {
        dispatch({
            type: someConstants.FETCH_SOMETHING,
            payload: res
        })

    })
}

和reducers，像下面的：

export default function someReducer(state = INITIAL_STATE, action) {
    switch (action.type) {
        case types.FETCH_SOMETHING:
            return ({
                ...state,
                someVar: action.payload
            });

我将 reducer 与 redux 的 combineReducers 结合起来并将它们导出为单个 reducer，然后将其导入我的商店。

因为我用的是drizzle，所以我的rootSaga是这样的：

import { all, fork } from 'redux-saga/effects'
import { drizzleSagas } from 'drizzle'

export default function* root() {
  yield all(
    drizzleSagas.map(saga => fork(saga)),
  )
}

所以，现在，当我想更新道具时，在组件的 componentWillReceiveProps 中，我会这样做： this.props.someAction()

好的，它有效，但我知道这不是正确的方法。基本上，这是我能做的最糟糕的事情。

所以，现在，我认为我应该做的是：

创建不同的传奇，然后我将其导入到 rootSaga 文件中。这些 sagas 将每隔一些预定义的时间轮询源并在需要时更新道具。

但我的问题是应该如何编写这些传奇故事。

能否根据我上面提到的动作、reducer 和容器给我一个例子？

编辑：

我设法遵循了 apachuilo 的指示。

到目前为止，我做了这些调整：

动作是这样的：

export const someFunc = (payload, callback) => ({
            type: someConstants.FETCH_SOMETHING_REQUEST,
            payload,
            callback
})

和 reducer，像这样：

export default function IdentityReducer(state = INITIAL_STATE, {type, payload}) {
    switch (type) {
        case types.FETCH_SOMETHING_SUCCESS:
            return ({
                ...state,
                something: payload,
            });
...

我还创建了 someSagas:

...variousImports

import * as apis from '../apis/someApi'

function* someHandler({ payload }) {
    const response = yield call(apis.someFunc, payload)

    response.data
        ? yield put({ type: types.FETCH_SOMETHING_SUCCESS, payload: response.data })
        : yield put({ type: types.FETCH_SOMETHING_FAILURE })
}

export const someSaga = [
    takeLatest(
        types.FETCH_SOMETHING_REQUEST,
        someHandler
    )
]

然后，更新 rootSaga:

import { someSaga } from './sagas/someSagas'

const otherSagas = [
  ...someSaga,
]

export default function* root() {
  yield all([
    drizzleSagas.map(saga => fork(saga)),
    otherSagas
  ])
}

此外，api 如下：

export const someFunc = (payload) => {
    payload.someFetching.then(res => {
        return {data: res}
    }) //returns 'data' of undefined but just "return {data: 'something'} returns that 'something'

所以，我想更新我的问题：

我的 API 取决于商店的状态。正如你所理解的，我正在构建一个 dApp。所以，Drizzle（我按顺序使用的中间件访问区块链），需要在我打电话之前启动组件的 APIs 和 return 信息。因此，

一个。尝试使用 getState() 读取状态，return 是我的空合同（尚未 "ready" 的合同）- 所以我无法获取信息 - 我不喜欢从商店读取状态，但是...

b.通过组件传递状态 (this.props.someFunc(someState), return 是我 Cannot read property 'data' of undefined 有趣的是我可以 console.log 状态（看起来没问题）并尝试只使用 `return {data: 'someData'}，道具正在接收数据
我是否应该运行 this.props.someFunc()，例如 componentWillMount()？这是更新道具的正确方法吗？

很抱歉这么长post，但我想要准确。

为 1b 编辑：呃，编辑了这么多 :) 我用未定义的解决方案解决了这个问题。只需要这样写 API：

export function someFunc(payload)  {

    return payload.someFetching.then(res => {
            return ({ data: res })   
    }) 
}

Answer 1

我不想强加我使用的模式，但我已经在多个应用程序中成功使用了一段时间（非常感谢任何人的反馈）。最好四处阅读并进行实验，找出最适合您和您的项目的方法。

这是我在提出解决方案时阅读的一篇有用的文章。还有一个，如果我能找到它 -- 我会在这里添加它。

https://medium.com/@TomasEhrlich/redux-saga-factories-and-decorators-8dd9ce074923

这是我用于项目的基本设置。请注意我使用的是 saga util 文件。不过，我确实提供了一个没有它的用法示例。您可能会发现自己在这个过程中创造了一些东西来帮助您减少这个样板。（甚至可能有助于处理您的轮询场景）。

我非常讨厌样板文件。我什至创建了一个与我的 golang API 一起使用的工具，通过走 swagger doc/router 端点自动生成一些样板文件。

编辑：添加了容器示例。

示例组件

import React, { Component } from 'react'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { getResource } from '../actions/resource'

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      getResource
    },
    dispatch
  )

class Example extends Component {
  handleLoad = () => {
    this.props.getResource({
      id: 1234
    })
  }

  render() {
    return <button onClick={this.handleLoad}>Load</button>
  }
}

export default connect(
  null,
  mapDispatchToProps
)(Example)

示例action/resource.js

import { useDispatch } from 'react-redux'

const noop = () => {}
const empty = []

export const GET_RESOURCE_REQUEST = 'GET_RESOURCE_REQUEST'
export const getResource = (payload, callback) => ({
  type: GET_RESOURCE_REQUEST,
  payload,
  callback,
})

// I use this for projects with hooks!
export const useGetResouceAction = (callback = noop, deps = empty) => {
  const dispatch = useDispatch()

  return useCallback(
    payload =>
      dispatch({ type: GET_RESOURCE_REQUEST, payload, callback }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [dispatch, ...deps]
  )
}

相当基本的 redux 操作文件。

示例reducers/resource.js

export const GET_RESOURCE_SUCCESS = 'GET_RESOURCE_SUCCESS'

const initialState = {
  resouce: null
}

export default (state = initialState, { type, payload }) => {
  switch (type) {
    case GET_RESOURCE_SUCCESS: {
      return {
        ...state,
        resouce: payload.Data,
      }
    }
}

相当标准的 reducer 模式 - 注意这里使用 _SUCCESS 而不是 _REQUEST。这很重要。

示例saga/resouce.js

import { takeLatest } from 'redux-saga/effects'

import { GET_RESOUCE_REQUEST } from '../actions/resource'

// need if not using the util
import { GET_RESOURCE_SUCCESS } from '../reducers/resource'

import * as resouceAPI from '../api/resource'

import { composeHandlers } from './sagaHandlers'

// without the util
function* getResourceHandler({ payload }) {
    const response = yield call(resouceAPI.getResouce, payload);

    response.data
      ? yield put({ type: GET_RESOURCE_SUCCESS, payload: response.data })
      : yield put({
          type: "GET_RESOURCE_FAILURE"
        });
  }

export const resourceSaga = [
  // Example that uses my util
  takeLatest(
    GET_RESOUCE_REQUEST,
    composeHandlers({
      apiCall: resouceAPI.getResouce
    })
  ),
  // Example without util
  takeLatest(
    GET_RESOUCE_REQUEST,
    getResourceHandler
  )
]

一些资源的示例 saga 文件。这是我将 api 调用与每个端点数组中的 reducer 调用连接起来以获取资源的地方。然后，这会传播到根传奇中。有时您可能想使用 takeEvery 而不是 takeLatest —— 一切都取决于用例。

示例saga/index.js

import { all } from 'redux-saga/effects'

import { resourceSaga } from './resource'

export const sagas = [
  ...resourceSaga,
]

export default function* rootSaga() {
  yield all(sagas)
}

简单的 root saga，看起来有点像 root reducer。

工具saga/sagaHandlers.js

export function* apiRequestStart(action, apiFunction) {
  const { payload } = action

  let success = true
  let response = {}
  try {
    response = yield call(apiFunction, payload)
  } catch (e) {
    response = e.response
    success = false
  }

  // Error response
  // Edit this to fit your needs
  if (typeof response === 'undefined') {
    success = false
  }

  return {
    action,
    success,
    response,
  }
}

export function* apiRequestEnd({ action, success, response }) {
  const { type } = action
  const matches = /(.*)_(REQUEST)/.exec(type)
  const [, requestName] = matches

  if (success) {
    yield put({ type: `${requestName}_SUCCESS`, payload: response })
  } else {
    yield put({ type: `${requestName}_FAILURE` })
  }

  return {
    action,
    success,
    response,
  }
}

// External to redux saga definition -- used inside components
export function* callbackHandler({ action, success, response }) {
  const { callback } = action
  if (typeof callback === 'function') {
    yield call(callback, success, response)
  }

  return action
}

export function* composeHandlersHelper(
  action,
  {
    apiCall = () => {}
  } = {}
) {
  const { success, response } = yield apiRequestStart(action, apiCall)

  yield apiRequestEnd({ action, success, response })

  // This callback handler is external to saga
  yield callbackHandler({ action, success, response })
}

export function composeHandlers(config) {
  return function*(action) {
    yield composeHandlersHelper(action, config)
  }
}

这是我的 saga util 处理程序的一个非常简短的版本。需要消化的东西很多。如果你想要完整版，我会看看我能做些什么。我的完整处理诸如在 api success/error 上自动生成 toast 并在成功时重新加载某些资源之类的东西。有一些用于处理文件下载的东西。另一件事是处理任何可能发生的奇怪的内部逻辑（很少使用它）。

以正确的方式发送动作

Dispatch actions the proper way

javascript

drizzle

reactjs

redux-thunk

react-redux