如何将值传递给rootSaga?

时间:2017-12-15 12:21:28

标签: reactjs redux redux-saga

我现在正在Official Docs练习redux-saga 我对example

有疑问

sagas.js

import {delay} from 'redux-saga';
import {all, call, put, takeEvery} from 'redux-saga/effects';
import axios from 'axios';

const API_ROOT = 'http://localhost:8000';

const postAPIGetToken = ({username, password}) => {
  const request = axios({
    method: 'post',
    url: `${API_ROOT}/api-token-auth/`,
    data: {
      username,
      password
    }
  });
  return request();
};


export function* shootAuth(action) {
  const res = yield call(postAPIGetToken, action.payload);
  yield put({
    type: 'GOT_RESPONSE',
    payload: res
  })
}


// single entry point to start all Sagas at once
export default function* rootSaga(values) {
  const {username, password} = values;
  yield all([
    helloSaga(),
    watchIncrementAsync(),
    shootAuth()
  ])
}

main.js

import "babel-polyfill"

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore ,applyMiddleware} from 'redux'
import createSagaMiddleware from 'redux-saga';

import Counter from './Counter'
import reducer from './reducers'
import {helloSaga} from "./sagas";
import rootSaga from "./sagas";
const sagaMiddleWare = createSagaMiddleware()

const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleWare)
);
sagaMiddleWare.run(rootSaga);

const action = (type, payload={}) => store.dispatch({type, payload})

function render() {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => action('INCREMENT')}
      onDecrement={() => action('DECREMENT')}
      onIncrementAsync={() => action('INCREMENT_ASYNC')}
      shootToken={()=>action('SHOOT_TOKEN',
        {
          username: 'tonyod',
          password: 'mbx12345'
        })}
    />,
    document.getElementById('root')
  )
}

render()
store.subscribe(render)

在我的工作项目中。我的reactredux-form,并且已经可以通过username/password了。这是我的方法。

onSubmit(values) {
    const {username, password} = values;
    this.props.onSubmitClick(values, REQUEST);
  }

我有usernamepassword表格。我想将它们传递给saga。但是rootSaga没有争论。我该如何供应?

2 个答案:

答案 0 :(得分:1)

只需将其他参数传递给sagaMiddleware.run来电,如下所示:

sagaMiddleWare.run(rootSaga, value);

答案 1 :(得分:0)

感谢protected new ServiceRepositoryStore<T> Store { get { return (ServiceRepositoryStore<T>) base.Store; } } gitter的panigrah

  你正在使用传奇登录吗? Sagas将听取调度方法。因此,在您的操作处理程序中,您将使用有效内容中的用户名和密码参数调度LOGIN之类的操作。在saga中,您可以侦听要调度的LOGIN操作,并从操作负载中获取用户名和密码。

因此我采用了错误的实施方式。 我模拟单个按钮会发出chat-room/reactjs actiontype是用户名和密码。

我错过的是:

1 - 我必须使用payload

store.dispatch(action)

2 - 我必须<Counter value={store.getState()} shootToken={()=>store.dispatch( { type:'SHOOT_ASYNC', payload: { username: 'tonyod', password: '12345' } }) } /> takeEvery才能在应用中观看takeLastest

actions

PS。:const postAPIGetToken = (values) => { const {username, password} = values; return axios.post(`${API_ROOT}/api-token-auth/`, { username, password }); }; export function* shootAuth(action) { const res = yield call(postAPIGetToken, action.payload); yield put({ type: 'GOT_RESPONSE', payload: res }) } export function* watchShootAuth() { yield takeEvery('SHOOT_ASYNC', shootAuth) } // single entry point to start all Sagas at once export default function* rootSaga() { yield all([ helloSaga(), watchIncrementAsync(), watchShootAuth() ]) } 不适用于整个第2号代码。它部分适用于它们。