redux - objetos - metodos en javascript

Las acciones deben ser simples objetos javascript

Question

A continuación está el código para mi creador de acciones:

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

Junto a escribir: FETCH_POSTS, si agrego, en lugar de; recibo el error Token inesperado. ¿Es esa la sintaxis para los creadores de acción?

Entonces si lo reemplazo, con; al compilar, obtengo el error ''Las acciones deben ser simples objetos JavaScript.

¿Alguna idea de por qué?

Answer 1

Cuando reemplazas , con ; Obtiene un error porque, como lo indica su mensaje de error, una acción debe devolver un objeto JavaScript.

En JavaScript, las propiedades de los objetos deben estar separadas por , como:

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

De esta forma, la declaración de retorno devolverá un nuevo objeto con dos propiedades type y payload .

Answer 2

La respuesta de GibboK ya ha señalado el error de sintaxis.

Sin embargo, no creo que entiendas el uso correcto de las acciones. Tu corres:

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

Esto está creando una promesa. Actualmente estás devolviendo esto en una acción. Los reductores están destinados a ser deterministas y libres de efectos secundarios, por lo tanto, las acciones deben ser simples objetos JS. No deberías enviar una promesa.

En su lugar, debe utilizar algún middleware relevante, por ejemplo, redux-thunk , redux-saga u otra cosa. Debe enviar una acción cuando la promesa real se haya resuelto.

Como un simple ejemplo artificial, usando 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})
});
};

Tenga en cuenta que este código es solo un ejemplo y no necesariamente adecuado para su uso en un sistema de producción.

Answer 3

Según la documentación redux :

Actions son objetos simples de JavaScript. Las acciones deben tener una type property que indique el tipo de acción que se realiza. Los tipos normalmente se deben definir como string constants . Una vez que su aplicación es lo suficientemente grande, es posible que desee moverlos a un módulo separado.

Y creadores de acción

Los creadores de acciones son funciones que crean acciones

En los creadores de acciones de Redux simplemente devuelven una acción:

function addTodo(text) {
return {
type: ADD_TODO,
text
}
}

Entonces, cuando llame al action creator desde su componente a través del dispatch su creador de acciones solo tiene que devolver un objeto JavaScript simple.

Entonces, un creador de acción normal será

export function fetchPosts()
{
return
{
type: FETCH_POSTS;
payload: "somevalue"
};
}

Ahora, si desea llamar a las API dentro de sus creadores de acción, necesita hacer uso de middlewares como redux-thunk o redux-saga mientras crea una tienda

me gusta

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

Usted configura su tienda con middleware puede modificar sus acciones a

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

Según la documentación redux-thunk

¿Por qué necesitas redux-thunk?

Redux Thunk middleware permite escribir creadores de acciones que devuelven una función en lugar de una acción. El thunk se puede utilizar para retrasar el dispatch de una acción, o para dispatch solo si se cumple una determinada condición. La función interna recibe el dispatch and getState métodos de la tienda dispatch and getState como parameters .