标签: redux-saga

我在 React/redux 中构建了一个应用程序，它可以在我尝试过的每个浏览器中使用，但在 MacOS 上的 Safari 和 iPhone 上的任何浏览器中都可以使用。我没有收到错误消息，没有控制台消息，也没有任何可以给我一些想法的东西。它只在 Safari 中呈现标签并且屏幕是空白的。

http://podcast.exploration.io

你知道我如何追踪这个问题吗？

谢谢

在编写redux-thunk函数时,称为thunks,有很多样板可以很容易地被抽象掉.例如,在我们的大多数异步API调用中,我们正在执行以下操作,没有任何副作用:

export const LOGIN_REQUEST = 'my-app/auth/LOGIN_REQUEST';
export const LOGIN_RECIEVE = 'my-app/auth/LOGIN_RECIEVE';
export const LOGIN_FAILURE = 'my-app/auth/LOGIN_FAILURE';

// ... reducer code here

export function login(loginHandle, password) {
  return (dispatch, getState, api) => {
    dispatch({ type: LOGIN_REQUEST });

    api.post('/auth/login', { loginHandle, password }).then(
      response => dispatch({ type: LOGIN_RECIEVE, response }),
      error => dispatch({ type: LOGIN_FAILURE, error })
    );
  };
}

简单!虽然因为这涵盖了我们至少70%的请求,但我确信有一种优雅的方法可以将上述代码抽象为类似的东西(伪代码):

export function login(loginHandle, password) {
  return (dispatch, getState, api) => api('POST', LOGIN_REQUEST, '/auth/login', { loginHandle, password }); …

当调度动作是它到达减速器并保证传奇时的顺序？

我能依靠吗？

1. 首先进入减速机
2. 传奇故事？

减速器:

 function reducer(state, action) {

    switch (action.type) {
       case 'MY_ACTION':
       // decorate action so that an epic doesn't have to take data from store
       action.ports = state.itemsModified;                 
       return state;
     }
    }

佐贺:

export function* sagaUpdatePorts() {
    yield* ReduxSaga.takeEvery(actions.GRID_PORTS_ASYNC_UPDATE_PORTS, updatePorts);
}

function* updatePorts(action) {
    const {response, error} = yield SagaEffects.call(portsService.updatePorts, action.ports);
}

使用redux-saga,可以并行执行多个效果:

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

// correct, effects will get executed in parallel
const [users, repos]  = yield [
  call(fetch, '/users'),
  call(fetch, '/repos')
]

如何以编程方式创建这些"call"-calls ？

我想要实现的是:

让我说我有一个不同参数的数组,我想每个参数执行一个服务器请求,但与redux-saga并行:

const parameters = ['abc', 'def', 'ghi']

const allMyFetchCalls  = parameters.map( (p) => makeCallRequestWithParameter(p) );

makeCallRequestWithParameter将创建一个函数调用:(或者在终极版-SAGA-讲话的效果)调用(提取,PARAM)在像收率调用(提取,PARAM)

const resultArray = yield allMyFetchCalls;

这是可能的,如果是的话,怎么样？

Redux saga noob在这里.

我需要创建一个saga,从我的API服务器加载redux存储的初始状态.

这涉及使用两个异步传奇:getCurrentUser和getGroups.

我需要并行发出这些ajax请求,并在发出动作之前等待GET_CURRENT_USER_SUCCESS和动作,告诉UI是时候渲染反应组件.GET_GROUPS_SUCCESSpageReady

我提出了一个hacky解决方案:

function * loadInitialState () {
  yield fork(getCurrentUser)
  yield fork(getGroups)

  while (true) {
    yield take([
      actions.GET_GROUPS_SUCCESS,
      actions.GET_CURRENT_USER_SUCCESS
    ])
    yield take([
      actions.GET_GROUPS_SUCCESS,
      actions.GET_CURRENT_USER_SUCCESS
    ])
    yield put(actions.pageReady())
  }
}

此代码的问题在于,如果由于某种原因GET_GROUPS_SUCCESS发出两次,pageReady则会提前调用该操作.

我怎样才能让redux saga等待GET_GROUPS_SUCCESS并GET_CURRENT_USER_SUCCESS以任何顺序至少发生一次？

我有一个获取API的传奇(A).这与行动(a)联系在一起.我想触发一个动作(b),它在内部调用(a),等待它完成,然后yield是某些东西.

// saga A -> action_a
function *saga_a(action) {
  yield put( ...action1...);
  yield call(api, ...params);
  yield put( ...action2...);
}


// saga B -> action_b
function *saga_b(action) {
  yield put(..action3..)

  waitFor -- put(action_a)     <------ how to achieve this?

  yield put(..action4..)
 }

我在我的项目中使用 redux-saga。我之前使用过 redux-thunk，所以我不能 setState 结束一些异步请求。喜欢

this.props.thunkAsync()
  .then(){
    this.setState({ '' });
  }

由于 thunk 返回 promise，我可以使用“then”。但我不能用 saga 做到这一点，因为 saga 不返回承诺。因此，我通过检查标志道具（如 REQUEST_SUCCESS、REQUEST_WAITING...）在 componentWillReceiveProps 中进行了更改。我认为这不是解决这个问题的好方法。

所以..我的问题是当异步请求以 redux-saga 结束时我该如何做一些工作！

我正在尝试使用 redux saga 库来捕获一些操作，但是在运行应用程序时出现此错误：

index.js:2178 在 rootSaga 在 projectSaga 在 watchFetchRequest at takeEvery 的 rootSaga 中未被捕获 错误：take(patternOrChannel): 参数 8 不是有效的通道或有效的模式 ( http://localhost:3000/static/js/bundle。 js:84689:9 ) 在 takeEvery ( http://localhost:3000/static/js/bundle.js:85993:94 ) 在 createTaskIterator ( http://localhost:3000/static/js/bundle.js:85179: 17 ) 在 runForkEffect ( http://localhost:3000/static/js/bundle.js:85583:24 ) 在 runEffect ( http://localhost:3000/static/js/bundle.js:85468:872 ) 在 next ( http://localhost:3000/static/js/bundle.js:85348:9 ) 在 proc (http://localhost:3000/static/js/bundle.js:85303:3 ) 在 runForkEffect ( http://localhost:3000/static/js/bundle.js:85587:19 ) 在 runEffect ( http:// localhost:3000/static/js/bundle.js:85468:872 ) at http://localhost:3000/static/js/bundle.js:85677:14 at Array.forEach () at runAllEffect ( http://localhost :3000/static/js/bundle.js:85676:10 ) 在 runEffect ( …

最近我开始重构我的 React 项目以开始在其中使用 Typescript。我在打字时遇到了一个问题，我不知道如何克服。

技术堆栈：Typescript、React、Redux、Redux-Saga

我还将 ESLint 与 AirBnB 规则集一起使用。

我正在尝试编写一个使用授权服务中定义的异步函数的传奇。下面的代码是我第二次尝试编写此代码。我已经拆分了signIn saga，以便不按照本文末尾的建议混合yield返回类型。

export function* callSignInService(userCredentials: UserCredentialsInterface): \n    Generator<CallEffect, UserAuthDataInterface, UserAuthDataInterface> > \n{\n    return yield call(signInService, userCredentials);\n}\n\nexport function* signIn(action: PayloadAction<UserCredentialsInterface>): \n    Generator<StrictEffect, void, PutEffect> \n{\n    try {\n        const { payload } = action;\n        const userData = yield* callSignInService(payload);\n\n        yield put(signInSuccess(userData));\n    } catch (error) {\n        yield put(signInFailure(error.message));\n    }\n}\n

登录服务的简化版本：

const signIn = async ( userCredentials: UserCredentialsInterface ): Promise<UserAuthDataInterface>\n{\n    /* ... Some …

Redux-Saga 是一个 Redux 副作用管理器，据说已被弃用，并且不再维护。

然而，尽管 Redux-Saga 的最后一个 1.1.3 版本已经发布了近 3 年，但每周仍有超过 100 万开发者下载这个 NPM 包。

如果我继续长期使用 Redux-Saga，即使它的作者不再维护它，我可能会遇到什么问题？