Javascript 使用React/Redux saga将数据从组件传递到动作和传奇

我在用React和Redux的故事。当我试图用这个.props.dispatch（{type:CreateActionType.CREATE_ASYNC}）在我的组件中执行一个Saga效果时；没有任何事情发生，它不会被执行

当我在index.js中记录console.log this.props.data时，它是空的

如果这里缺少必要的信息，请告诉我

api.js

export const create = (params) => {
const dataList = {
    data: {data1: 1, data2: 2,},
    statusCode: 200,
}
    return dataList;
};

sagas.js

import { put, call, takeEvery , all } from 'redux-saga/effects'
import { create } from '../api';

import * as CreateActionType from './constants';

export function* createAsync(action) {
    const result = yield call(create, action.params);
    const statusCode = result.statusCode;

    if (statusCode === 200) {
        yield [
            put({ type: CreateActionType.CREATE_SUCCESS, params: result.data }),
        ];
    } else {
        console.warn("createAsync error", result.data);
    }
};

function* WatchCreate() { 
    yield [
        takeEvery(CreateActionType.CREATE_ASYNC, createAsync),
    ]  
}

export default function* rootSaga() {
    yield all([
        WatchCreate(),
    ])
}

store.js

import * as CreateActionType from './constants';
import { combineReducers } from 'redux';

const defaultState = {
    data: null,
}

function CreateStore(state = defaultState, action) {

    switch (action.type) {
        case CreateActionType.CREATE_SUCCESS:
            return {
                ...state,
                createStatus: true,
            };
        default:
            return state;
    }
};

const rootReducer = combineReducers({
    CreateStore,
})

export default rootReducer;

index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as CreateActionType from './constants';

class CreateNote extends Component {
    constructor(props){
        super(props);

        this.state = {};
    };

    componentDidMount() {
        this.props.dispatch({
            type: CreateActionType.CREATE_ASYNC,
        });
    };

    render() {
        return <p>{this.props.data}</p>;
    }
}

const mapStateToProps = (state) => {        
    return state.CreateStore;
};

export default connect(mapStateToProps)(CreateNote);

---

很难判断出哪里出了问题，因为代码太多了

假设saga实际上正在运行，您永远不会对返回的数据做任何事情，这就解释了为什么

this.props.data

为空。你可以试试这个

 case CreateActionType.CREATE_SUCCESS:
        return {
            ...state,
            createStatus: true,
            data: action.params.data,
        };

如果您不确定sagas是否正在运行，那么应该在api.js和sagas.js中添加一些日志调用

我看不出有任何理由认为这些传说不可行，但你可以试着把它简化一点。我不认为产生一系列效果比产生单一效果有任何好处

export default function* rootSaga() {
    yield takeEvery(CreateActionType.CREATE_ASYNC, createAsync)
}

试着简化一下

function* WatchCreate() { 
    yield [
        takeEvery(CreateActionType.CREATE_ASYNC, createAsync),
    ]  
}

export default function* rootSaga() {
    yield all([
        WatchCreate(),
    ])
}

到

我发现尽可能多地处理效果级别（同步创建的对象），而不是嵌套的故事，会更容易。

---

您的问题可能是调用

WatchCreate

并尝试使用返回值，尽管它没有返回值。

您的动作传奇有一个参数

createAsync（action）

。调用函数时需要传递数据，如下所示

takeEvery（createActionType.CREATE\u ASYNC，createAsync，action）

。以下面这个例子为例

从'@redux saga/core/effects'导入{call，put，SagaReturnType，takeLatest}
从“axios”导入axios，{AxiosResponse}
从“/ActionCreators”导入*作为ActionCreators
将*作为ActionTypes从“/ActionTypes”导入
apiResponse类型=SagaReturnType
constdeleteuser=async（userId:string）：Promise=>{
返回axios.delete（`localhost:8081/users/${userId}`）
}
函数*deleteUserSaga（用户：用户）{
试一试{
if（user.userId）{
const response:apiResponse=yield调用（deleteUser，user.userId）
如果（response.status==200）{
put（ActionCreators.deleteSuccess（用户））
}
抛出新错误（“用户删除不成功”）
}
}捕捉（错误）{
put（ActionCreators.deleteError（err））
}
}
//eslint禁用下一行
导出默认函数*DeleteUserWatcher（用户：用户）{
最新版本（ActionTypes.DELETE\u BEGIN、deleteUserSaga、user）
}

创建一个代码片段并与他人共享，您将获得更多反馈。您应该对其进行调试。如果控制台中没有错误消息，请添加一些console.log调用以查看执行了什么或没有执行什么。您为其他人做得越容易，就有越多的人能够帮助您。@Lid我从api.js获得数据，并且我使用componentWillReceiveProps（nextProps）{this.setState（{content:nextProps.data}）；}修复了index.js上的componentWillReceiveProps（nextProps）{this.setState（{content:nextProps.data}）。谢谢。为什么要使用组件状态？您正在使用redux。在redux中保持状态并在组件中使用道具要简单得多。@NguyễNánhNam Mh。我注意到您还将

put

放入一个数组中，这是不必要的。你是说你的州里还有空值？你检查过你所有的传奇都是用断点/调试器调用的吗？您是否看到开发工具中调度了所有预期的操作？

function* WatchCreate() { 
    yield [
        takeEvery(CreateActionType.CREATE_ASYNC, createAsync),
    ]  
}

export default function* rootSaga() {
    yield all([
        WatchCreate(),
    ])
}

export default function* rootSaga() {
    yield all([
        takeEvery(CreateActionType.CREATE_ASYNC, createAsync),
    ])
}