操作必须是纯JavaScript对象

下面是我的行动的创建者代码：操作必须是纯JavaScript对象

export function fetchPosts() 
    { 
    const request = axios.get(`${ROOT_URL}/posts${API_KEY}`); 
    return 
     { 
     type: FETCH_POSTS; 
     payload: request 

     }; 
    }

下键入：FETCH_POSTS，如果我加入，而不是;我得到错误意外的令牌。这是行动创造者的语法吗？

然后，如果我替换，与;编译后，我得到错误'操作必须是纯Javascript脚本。

任何想法为什么？

来源

2017-07-27 Dolwin Fernandes

你应该返回一个对象。对象属性由'，'not';'定界，所以它应该是'type：FETCH_POSTS，' –

[Actions必须是React/Redux中的普通对象？]（https://stackoverflow.com/questions/39693161 /动作-必须待纯对象 - 在反应的-终极版） –

当您将,替换为;时，您会收到错误消息，因为如错误消息所述，操作必须返回JavaScript对象。

在JavaScript对象的属性应该由,，可以分离：

return 
     { 
     type: FETCH_POSTS, // use comma here 
     payload: request 
     };

这样的return语句将返回一个新的对象具有两个属性type和。

来源

2017-07-27 06:30:03 GibboK

GibboK的回答已经指出了语法错误。

但是，我不认为你理解正确使用动作。你运行：

const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

这是创造一个承诺。您目前正在回复此操作。减速器意味着确定性的免费副作用&，因此为什么动作应该是纯JS对象。你不应该提交承诺。

相反，您应该使用一些相关的中间件，例如， redux-thunk，redux-saga或其他东西。当实际承诺已经解决时，您应该发送一个动作。

作为一个简单的人为的例子，使用redux-thunk：

export const fetchPosts =() => (dispatch) => { 
    // Send action to notify request started. Reducers often want to 
    // update the state to record that a request is pending, e.g. for 
    // UI purposes. 
    dispatch({type: FETCH_POSTS_START}); 

    // Start request 
    request = axios.get(`${ROOT_URL}/posts${API_KEY}`) 
     .then(res => { 
      // Successfully received posts, submit response data 
      dispatch({type: FETCH_POSTS_COMPLETE, payload: res.data}) 
     }) 
     .catch(err => { 
      // API call failed, submit error 
      dispatch({type: FETCH_POSTS_ERROR, payload: err}) 
     }); 
};

注意此代码只是一个例子，并不一定适合于在生产系统中使用。

来源

2017-07-27 06:48:18

作为每redux文档：

Actions是纯JavaScript对象。操作必须有一个type property，表示正在执行的操作的类型。通常应将类型定义为string constants。一旦您的应用程序足够大，您可能需要将它们移动到单独的模块中。

和行动创造者

行动创造者是创建操作

功能在终极版动作制作者简单地返回一个动作：当你调用action creator
function addTodo(text) { 
    return { 
    type: ADD_TODO, 
    text 
    } 
} 

所以从您的组件通过dispatch您的交流灰色创造者只需要简单地返回一个简单的JavaScript对象。

所以正常动作的创造者将

export function fetchPosts() 
    { 

    return 
     { 
     type: FETCH_POSTS; 
     payload: "somevalue" 

     }; 
    }

现在如果你想打电话给你需要使用像redux-thunk或redux-saga中间件的同时创造一个商店

像

你的行动创造者中的API

import thunk from 'redux-thunk'; 
const store = createStore(reducers, applyMiddleware(thunk));

您可以使用中间件来配置您的商店，您可以将您的操作修改为

export function fetchPosts() { 
    return (dispatch) => { 
     axios.get(`${ROOT_URL}/posts${API_KEY}`) 
       .then((response)=> { 
        dispatch({ 
          type: FETCH_POSTS, 
          payload: request 

        }) 
       }) 
     } 

    }

由于每redux-thunk文档

为什么你需要终极版，形实转换？

Redux Thunk middleware允许您编写动作创建者，该动作创建者返回一个函数而不是动作。 thunk可用于延迟 dispatch的动作，或者仅在满足某个条件时才可以使用dispatch。内部函数接收存储方法 dispatch and getState作为parameters。

来源

2017-07-27 06:57:39

操作必须是纯JavaScript对象

回答

相关问题