标签: redux-saga

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

我能依靠吗？

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);
}

我的传奇根看起来像这样

export default function* root() {
  yield takeLatest(LOAD_SEARCHRESULTS, getSearchResults);
}

它监视LOAD_SEARCHRESULTS动作,然后调用getSearchResults函数.

有什么方法可以在root中观看多个动作吗？像这样的东西:

export default function* root() {
  yield takeLatest(LOAD_SEARCHRESULTS, getSearchResults);
  yield takeLatest(CHANGE_ALIASFILTER, getSearchResults);
  yield takeLatest(CHANGE_CATFILTER, getSearchResults);
}

因此,如果其中任何一个操作进入 - 它调用getSearchResults.我已经尝试过全部收益([])和takeEvery但它只是观察第一个动作.

我在这里找到了同样的问题,但我没有找到合适的答案.

我正在使用CRUD操作开发一个简单的应用程序.在编辑页面上,在组件被挂载(componentDidMount())之后,应用程序将调度操作以检索特定的帖子详细信息:

dispatch({ type: FETCH_POST, id: 'post-id' })

我正在使用redux-saga并希望上面的调用返回一个Promise,以便我可以访问API响应.

现在,没有回调/承诺,我最终在商店中定义了一个新状态(比如post_edited)并将其连接/映射到组件中的道具以进行编辑页面.

处理这种情况的最佳方法是什么？

我正在使用redux sagas活动频道.我有一个特定的用例,当事件被触发时我想得到getStore状态,因为eventChannel不是生成器函数我不能使用redux sagas的select效果.有没有其他方法来实现这一目标

我还尝试导入存储和使用,store.getState()但我得到了未定义,因为在存储初始化之前导入了saga文件.

function subscribe(socket) {
    return eventChannel(emit => {
        socket.subscribe(listenerTopic, {qos: 1});
        socket.on('reconnection', () => {
            // i need to fetch latest unread message, for that i need to get timestamp
           // for last message received which is in store so the command will be to 
         // send sinceDate i.e last message timestamp and untilDate that is currentDate
   })
}

我遇到了mapStateToProps参数的问题.这似乎是一个非常简单的错误,但我无法弄清楚发生了什么.基本上,我正在尝试做的是使用react-redux切换侧边栏菜单并做出反应.一切正常,但我收到以下错误:

未捕获错误:连接组件侧栏时,mapStateToProps参数的类型对象值无效.

感谢任何帮助:

索引 app/js/index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from '../store/configureStore';
import Canvas from '../components/Canvas/Canvas';

const store = configureStore();

render(
  <Provider store={store}>
    <Canvas />
  </Provider>,
  document.getElementById('app'),
);

减速

(索引)app/reducers/index.js

import { combineReducers } from 'redux';
import sidebar from './sidebar';

const rootReducer = combineReducers({
  sidebar,
});

export default rootReducer;

(补充工具栏)app/reducers/sidebar.js

import {
  TOGGLE_SIDEBAR,
} from '../actions';

const sidebar = (state = { value: true }, …

我见过传奇以三种方式听取行动:

1. while(true)take()

function* onUserDetailsRequest() {
  while(true) {
    const { userId } = yield take(USER_DETAILS_REQUESTED);
    const response = yield call(fetchUserDetails, userId);
    put(USER_DETAILS_RECEIVED, response);
  }
}    

2. while(take())

function* onUserDetailsRequest() {
  while(yield take(USER_DETAILS_REQUESTED)) {
    const userId = yield select(userSelectorFn);
    const response = yield call(fetchUserDetails, userId);
    put(USER_DETAILS_RECEIVED, response);
  }
}    

3. takeEvery()

function* onUserDetailsRequest() {
  yield takeEvery(USER_DETAILS_REQUESTED, function* (action) {
    const { userId } = action;
    const response = yield call(fetchUserDetails, userId);
    put(USER_DETAILS_RECEIVED, response);
  }
}

各自的优点和缺点是什么？在哪种情况下我们应该使用另一种情况？

刚刚从thunk转移到sagas我正试图找到最好的方法来调用setTimeout,然后从该函数内调用另一个函数(在这种情况下corewar.step()).这是我原来的代码,正如我所料.

  runner = window.setInterval(() => {

    for(let i = 0; i < processRate; i++) {
      corewar.step()
    }

    operations += processRate;

  }, 1000/60)

这段代码在a里面saga,我相信我应该可以call像在应用程序的其他区域中那样包装函数调用.

我已经尝试将setInterval调用包装在一个call并保留其他所有内容,这导致step()永远不会被调用.

  runner = yield call(window.setInterval, () => {

    for(let i = 0; i < processRate; i++) {
      corewar.step()
    }

    operations += processRate;

  }, 1000/60)

我已经尝试过,保持setInterval原样并将step()函数包装在一个调用中并更改匿名函数签名,function*这也导致step()永远不会被调用.

  runner = window.setInterval(function*() {

    for(let i = 0; i < …

我的网络应用程序使用自定义 ReadableStream 读取本地文件（这样我就不需要平台支持的最大文件大小），并且它对于格式正确的文件和错误文件都非常有效。我的应用程序是使用 React-Redux-Saga 构建的。

我现在尝试e2e向我的代码添加有限的测试来测试状态管理。我正在测试发送redux操作时状态是否正确更新。我正在使用 package 测试传奇redux-saga-tester。

在运行使用我构建的 ReadableStream 读取本地文件的 jest 客户端测试时，出现错误ReferenceError: ReadableStream is not defined。我的理解是使用的jsdom环境jest缺少 ReadableStream 实现。然后我添加了web-streams-polyfill包来填充 ReadableStream 类。

现在验证文件测试正在通过，就像在浏览器中一样：

test('Select and validate log file', async () => {
  const testFile = testFileBuilder.valid();
  storeTester.dispatch(fileSelected(testFile));
  await storeTester.waitFor(FILE_VALIDATED);
  const state = storeTester.getState().file;
  expect(state.fileValidated).toBeTruthy();
});

我的问题是，当我使用无效文件运行第二次验证测试时，测试通过，但在控制台上打印错误。

考试：

test('Select an invalid file - JSON error', async () => {
    const testFile = testFileBuilder.errorJSON();
    storeTester.dispatch(fileSelected(testFile));
    await storeTester.waitFor(FILE_ERROR);
    const state …

我刚刚在我的项目中开始使用sagas。目前，我停留在某个时候。我需要通过佐贺将参数传递给call函数。

这是我在传奇中的生成器函数：

  public* loadUsers() {
    const context = this;
    yield takeLatest("users/LOAD_USERS_REQUEST", function* (params) {
      const data = yield call([context.userService, context.userService.loadUsers]);
      yield put("users/LOAD_USERS_SUCCESS", data));
    });
  }

我需要将params变量传递给UserService.loadUsers方法。

我怎样才能做到这一点？

干杯。

我无法将redux存储值获取到props，我检查了reducers，store，action和JS文件，一切正常。但是，同时将选择器传递给mapStateToProps。

错误

错误：未捕获（承诺）TypeError：Object（...）不是函数

at selectHosDeatilsResult (AddAppointment.js?0a10:319)

import React from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';

 class example extends React.PureComponent {
  render() {
    console.log('this.props', this.props);
 return (
<div>
</div>
);
}
}
const selectHosDeatilsResult = () => createSelector(
  makeHospitalResult(),
  value => ({ value }),
);

const mapStateToProps = state => ({
details: selectDeatilsResult()(state),
});
export default connect(mapStateToProps, null)(example);

减速器代码

const initialState = fromJS({
  hospitalResult: null,
});

export default function Reducer(state = initialState, action) { …