api.js <\/em>(archivo api.js completo)<\/p>\n<\/div>\n[codepen_embed height=”265″ theme_id=”dark” slug_hash=”djMJNm” default_tab=”js” user=”8aclau”]See the Pen <a href=’https:\/\/codepen.io\/8aclau\/pen\/djMJNm\/’>api.js<\/a> by Claudia (<a href=’https:\/\/codepen.io\/8aclau’>@8aclau<\/a>) on <a href=’https:\/\/codepen.io’>CodePen<\/a>.[\/codepen_embed]<\/p>\n
Ya tenemos nuestras peticiones listas ahora necesitamos comenzar con nuestros reducers. Por ello, agregaremos Redux.js a nuestro proyecto.<\/p>\n
$ npm i redux<\/pre>\n <\/p>\n
Agregaremos tambi\u00e9n react-redux para hacer nuestro enlazamiento de datos con las vistas.<\/p>\n
$ npm i react-redux<\/pre>\n <\/p>\n
Y agregamos tambi\u00e9n un middleware para facilitar el manejo del dispatch<\/em> de Redux<\/em><\/p>\n$ npm i redux-thunk<\/pre>\n <\/p>\n
En la carpeta src<\/em> agregamos una carpeta llamada\u00a0reducers<\/em> y dentro de ella agregamos un archivo postReducer.js. <\/em>En este archivo vamos a importar\u00a0las funciones del archivo api.js<\/p>\n\n
import <\/span>{apiGetPost, apiAddPost, apiDeletePost, apiUpdatePost<\/span>} from<\/span> \r\n'..\/lib\/api'<\/span>;<\/pre>\n<\/div>\n <\/p>\n
Despu\u00e9s vamos a agregar nuestro estado inicial en el cual solo tendremos una lista de posts<\/p>\n
\n
const<\/span> initialState<\/span> = {posts<\/span>: []};<\/pre>\n<\/div>\n <\/p>\n
Agregamos los tipos de actions<\/em> que ser\u00e1n cuatro y las actions<\/em><\/p>\n\n
\/\/tipos de actions<\/em><\/span>\r\nconst<\/span> GET_POSTS<\/span> = 'GET_POSTS'<\/span>;\r\nconst<\/span> ADD_POST<\/span> = 'ADD_POST'<\/span>;\r\nconst<\/span> UPDATE_POST<\/span> = 'UPDATE_POST'<\/span>;\r\nconst<\/span> DELETE_POST<\/span> = 'DELETE_POST'<\/span>;\r\n\r\n\/\/actions<\/em><\/span>\r\nconst <\/span>getPosts <\/span>= (posts<\/span>) => ({ type: GET_POSTS, payload: posts<\/span> });\r\nconst <\/span>addPost<\/span> = (post<\/span>) => ({ type: ADD_POST, payload: post<\/span> });\r\nconst <\/span>updatePost<\/span> = (post<\/span>) => ({ type: UPDATE_POST, payload: post<\/span> });\r\nconst <\/span>deletePost<\/span> = (id<\/span>) => ({ type: DELETE_POST, payload: id<\/span> });<\/pre>\n<\/div>\n <\/p>\n
Agregamos las funciones que utilizaremos en nuestras vistas para hacer las peticiones y que ser\u00e1n las responsables de desencadenar nuestras actions.<\/em><\/p>\n\n
export<\/span> const<\/span> fetchGetPost <\/span>= () => {\r\n\/\/redux-thunk nos permite mandar el dispatch como par\u00e1metro<\/span>\r\n return<\/span> (dispatch<\/span>) => {\r\n \/\/Llamamos a la funci\u00f3n de la api<\/span>\r\n apiGetPost<\/span>()\r\n .then<\/span>(res<\/span> => \r\n\/\/al reolverse la petici\u00f3n de manera correcta desencadenamos la acci\u00f3n\r\n\/\/ getPosts enviando los posts recibidos<\/span>\r\n {dispatch<\/span>(getPosts<\/span>(res<\/span>));})\r\n .catch<\/span>(res<\/span> => {console.log(res);})\r\n }\r\n};<\/pre>\n<\/div>\n <\/p>\n
Agregamos la funci\u00f3n para hacer las modificaciones en el store<\/em>, la cual debe ser una funci\u00f3n pura, que pueda exportarse y que considere todos los tipos de acciones.<\/p>\n\n\u00bfQu\u00e9 es una funci\u00f3n pura?<\/span><\/h3>\nUno de los principios de Redux es realizar cambios mediante el uso de funciones puras.\u00a0Una funci\u00f3n pura\u00a0 es una funci\u00f3n que regresa un valor que es procesado basado en sus argumentos. Las funciones puras toman al menos un argumento y siempre regresan un valor. Otra de las caracter\u00edsticas de las funciones puras es que no alteran variables globales\u00a0 o cambian alg\u00fan elemento del estado de la aplicaci\u00f3n.<\/span><\/p><\/blockquote>\n <\/p>\n
\n
export<\/span> default<\/span> (state = initialState, action) => {\r\n switch<\/span> (action.type) {\r\n case<\/span> GET_POSTS:\r\n return<\/span> { ...state, posts:action.payload };\r\n case<\/span> ADD_POST:\r\n return<\/span> {...state,\r\n posts: [action.payload, ...state.posts]};\r\n case<\/span> UPDATE_POST:\r\n return<\/span> {...state,\r\n posts: [...state.posts.map<\/span>((post) => post.id === action.payload.id ?\r\n action.payload:post)]}\r\n case<\/span> DELETE_POST:\r\n return<\/span> {...state,\r\n post: [...state.<\/span>posts.<\/span>filter<\/span><\/span>(elem=>elem.id!==action.payload)]}\r\n default<\/span>:\r\n return<\/span> { ...state };}\r\n}\r\n\r\n<\/pre>\n<\/div>\n<\/div>\n
<\/div>\n
A continuaci\u00f3n tenemos el archivo completo<\/div>\n
<\/div>\n
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”KBMWxd” default_tab=”js” user=”8aclau”]See the Pen <a href=’https:\/\/codepen.io\/8aclau\/pen\/KBMWxd\/’>postReducer.js<\/a> by Claudia (<a href=’https:\/\/codepen.io\/8aclau’>@8aclau<\/a>) on <a href=’https:\/\/codepen.io’>CodePen<\/a>.[\/codepen_embed]<\/div>\n
<\/div>\n
<\/div>\n
Ya hemos creado nuestro
reducer<\/em> ahora necesitamos\u00a0 crear nuestro store<\/em>, asi que dentro de la carpeta reducers<\/em> agregamos un archivo llamado store.js <\/em>y dentro del archivo vamos a hacer un main reducer<\/em> y utilizar las funciones createStore<\/em> y applyMiddleware<\/em> para utilizar redux-thunk<\/em><\/div>\n<\/div>\n
\n
\n
\/\/importamos las funciones de redux<\/span>\r\nimport<\/span> { createStore<\/span>, applyMiddleware<\/span>, combineReducers<\/span> } from<\/span> 'redux';\r\nimport<\/span> thunk<\/span> from<\/span> 'redux-thunk';\r\n\r\n\/\/importamos nuestro reducer<\/span>\r\nimport<\/span> postsReducer<\/span> from<\/span> '.\/postsReducer';\r\n\r\n\/\/creamos un reducer principal que combina todos los reducer que realicemos<\/span>\r\n\/\/en este caso solo tenemos un reducer<\/span>\r\nconst<\/span> mainReducer <\/span>= combineReducers<\/span>({posts:postsReducer});\r\n\r\n\/\/creamos el store especificando que utilizamos thunk <\/span>\r\nexport<\/span> default<\/span> createStore<\/span>(mainReducer,applyMiddleware<\/span>(thunk));<\/pre>\n<\/div>\n<\/div>\n <\/p>\n
Es momento de agregar el store<\/em> a nuestra aplicaci\u00f3n para ello es necesario modifica nuestro index.js<\/em>. Primero agregaremos provider<\/em> y el store<\/em><\/p>\n\n
import<\/span> { Provider } from<\/span> 'react-redux';\r\nimport<\/span> store from<\/span> '.\/reducers\/store';<\/pre>\n<\/div>\n <\/p>\n
Modificamos el render<\/em> para asignar el store<\/em><\/p>\n\n
ReactDOM<\/span>.render<\/span>(\r\n <Provider store<\/span><\/span>={store<\/span>}>\r\n <App<\/span>\/>\r\n <\/Provider<\/span>>,\r\n document<\/span>.getElementById<\/span>('root'<\/span>)\r\n);<\/pre>\n<\/div>\n <\/p>\n
Ya es hora de hacer modificaciones a la vista para hacer uso de nuestro reducer<\/em>. Para conectar nuestra vista con el reducer\u00a0<\/em> primero debemos agregar una librer\u00eda que nos permita hacerlo.<\/p>\n$ npm i react-redux<\/pre>\n <\/p>\n
Ahora en el archivo App.js<\/em> vamos a importar connect <\/em>y\u00a0tambi\u00e9n las funciones del postReducer.js.<\/p>\n\n
import<\/span> { connect } from<\/span> 'react-redux'<\/span>;\r\nimport<\/span> { fetchGetPost, fetchAddPost, fetchUpdatePost, fetchDeletePost } from\r\n<\/span> '.\/reducers\/postsReducer'<\/span>;<\/pre>\n<\/div>\n <\/p>\n
Eliminamos el arreglo posts<\/em> y modificamos el export default<\/em> de app.js<\/em> para hacer uso de connect<\/em>, vamos a agregar dos par\u00e1metros a connect<\/em>, el primero ser\u00e1 una funci\u00f3n que mapear\u00e1 las propiedades del