{"data":{"post":{"fields":{"slug":"/how-to-implement-redux-in-react/","date":"2018-04-19"},"html":"\n

What is Redux?

\n

Everything you change in your application, including data and UI changes is contained in an object called state, so\nbasically Redux is a store that contains the application state and a few interesting methods.

\n

State

\n

State is a read-only object contains information about your application.\nWhen you want to modify the state, you need to dispatch an action.

\n

Action

\n

Put simply, action is a plain JavaScript object including information about changes in the application.\nYou can send an action to the store using store.dispatch() method.\nAction’s minimum requirement is a type property. Example below:

\n
{\n  type: 'INCREASE',\n  payload: action.payload\n}
\n

Action creators

\n

Action creators are functions which basically return or dispatch an action object. Example below:

\n
function increase() {\n  return {\n    type: 'INCREASE',\n  }\n}
\n

Reducer

\n

Reducer specifies how the application state changes in regard to a dispatched action.\nReducer receives initial state, previous state and action, then returns a new state object depending on action.type.

\n

Store should be immutable, so the reducer doesn’t modify the previous state, just returns a new state object.

\n

Store

\n

Store holds the current application state object, and has a few useful methods, for example dispatch allowing you to dispatch actions.\nWhen creating a store, you need to provide a reducer as a parameter to let the store know what you want to update and how.

\n
const store = createStore(reducer);
\n

Store methods:

\n

getState - returns current state

\n

dispatch - lets you dispatch actions

\n

subscribe - lets you subscribe on store changes and register a callback

\n

Important tips !

\n\n

To avoid object mutations, you can use those methods:

\n\n
return {\n  ...state,\n  counter: state.counter + 1\n}
\n\n
return Object.assign({}, state, {\n  counter: state.counter + 1\n}
\n

React installation

\n

For this article I used createReactApp starter.

\n

If you want to use it, please go to Crate React App,\nthen following the createReactApp manual, you should be able to use these commands:

\n
npx create-react-app my-app\ncd my-app\nnpm start
\n

Congratulations! Your React application is running.

\n

Now we want to install Redux.

\n

Redux installation

\n
npm i react-redux redux --save.
\n

Redux is installed, so now we can try to create our Redux store.\nPlease open the react app folder in your IDE, go to src.\nFor this article I removed all unnecessary files.\nYou can also remove everything from src besides index.js.

\n

Chapter 1 - Create our first Redux Store

\n

Go to index.js\nFirst of all, we need to import the createStore method

\n
import { createStore } from 'redux';
\n

To create a store, you need to call createStore method, and pass a reducer as an argument

\n
const store = createStore(reducer);
\n

Now we need a reducer.\nIn this case it is a simple counter reducer

\n
const reducer = (state = initialState, action) => {\n  // Reducer changes state depending on the action.type we are dispatching\n  switch (action.type) {\n    case 'INCREASE':\n      return {\n        ...state,\n        counter: state.counter + 1\n      };\n    case 'DECREASE':\n      return {\n        ...state,\n        counter: state.counter - 1\n      };\n    default:\n      return state;\n  }\n}
\n

As you can see, our reducer is using initialState.\nWe can define it like this:

\n
const initialState = {\n  counter: 0\n}
\n

Ok, that’s almost it.\nNow we want to dispatch an action to change our application state

\n
store.dispatch({\n  type: 'INCREASE'\n})\nstore.dispatch({\n  type: 'INCREASE'\n})\nstore.dispatch({\n  type: 'DECREASE'\n})
\n

I dispatched 3 actions with 2 different types. As I wrote above, TYPE is required in redux action.

\n

As a last step, we want to watch our changes.\nTo do it, we need to use the subscribe method.

\n
store.subscribe(() => {\n  console.log('Store changed: ', store.getState().counter)\n})
\n

Great! Now we have a working redux store. Check a console in your browser to see a state changes.\nWhole index.js file should looks like this

\n
import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { createStore } from 'redux';\n\nconst initialState = {\n  counter: 0\n}\n\nconst reducer = (state = initialState, action) => {\n  switch (action.type) {\n    case 'INCREASE':\n      return {\n        ...state,\n        counter: state.counter + 1\n      };\n    case 'DECREASE':\n      return {\n        ...state,\n        counter: state.counter - 1\n      };\n    default:\n      return state;\n  }\n}\n\nconst store = createStore(reducer);\n\nstore.subscribe(() => {\n  console.log('Store changed: ', store.getState().counter)\n})\n\nstore.dispatch({\n  type: 'INCREASE'\n})\nstore.dispatch({\n  type: 'INCREASE'\n})\nstore.dispatch({\n  type: 'DECREASE'\n})\n\nclass App extends Component {\n\n  render() {\n    return (\n      <h1>Redux in React</h1>\n    )\n  }\n}\n\nReactDOM.render(<App />, document.getElementById('root'));
\n

Chapter code here

\n

Chapter 2 - Modify the store from UI

\n

To modify the store from the UI, we will add some buttons in the App component.

\n
class App extends Component {\n\n  render() {\n    return (\n      <div>\n        <button onClick={() => increase()}>\n          +\n        </button>\n\n        <button onClick={() => decrease()}>\n        -\n        </button>\n        <h1>{`Result: ${store.getState().counter}`}</h1>\n      </div>\n    )\n  }\n}
\n

In our <App /> component we are using increase and decrease functions. Let’s prepare those functions.

\n
const increase = () => {\n  store.dispatch({\n    type: 'INCREASE'\n  })\n}\n\nconst decrease = () => {\n  store.dispatch({\n    type: 'DECREASE'\n  })\n}
\n

Functions above are dispatching actions.

\n

The last thing we need to do is a re-render an <App /> component when state changes.\nIn this case we can use the subscribe method on store object, then as a callback we can use

\n
ReactDOM.render() method
\n
const rootRender = () => {\n  ReactDOM.render(<App />, document.getElementById('root'));\n}\n\nstore.subscribe(() => {\n  rootRender();\n})\n\nrootRender();
\n

Now you can modify your application state from the UI.\nChapter code is here

\n

Chapter 3 - Redux middleware and logger

\n

Redux allows you to use middlewares.\nIn this chapter we want to use a logger middleware.\nLater in this article we will also use a redux-thunk middleware to handle async functions.

\n

First of all we need to install our logger

\n
npm i redux-logger --save-dev
\n

Now we need to import the applyMiddleware method

\n
import { createStore, applyMiddleware } from 'redux';\nimport { createLogger } from 'redux-logger';
\n

When the applyMiddleware method is available, we can create middleware

\n
const middleware = applyMiddleware(createLogger());
\n

The last step we need to do to be able to enjoy a logger is adding it as a second argument of the createStore function.

\n
const store = createStore(reducer, middleware);
\n

Done!\nYour logger should look like this

\n

\"Redux

\n

Chapter code is here

\n

Chapter 4 - Dividing Redux Store to separate files, Connect(), Provider

\n

In this chapter we are going to clean up our application.\nWe want to:

\n\n

First of all we want to install the dependencies

\n
npm i react-redux --save
\n

Now we want to create a Counter component.

\n
import React, { Component } from 'react';\n\nclass Counter extends Component {\n\n  render() {\n    return (\n      <div>\n        <button onClick={() => this.props.increase()}>\n          +\n        </button>\n\n        <button onClick={() => this.props.decrease()}>\n        -\n        </button>\n        <h1>{`Result: ${this.props.counter}`}</h1>\n      </div>\n    )\n  }\n}\n\nexport default Counter;
\n

To allow the Counter component connect to the store, we need to import the connect method

\n
import { connect } from 'react-redux';
\n

To allow us to read the state, we need to pass the redux state to the props (mapStateToProps), and use the connect() method.

\n
const mapStateToProps = state => {\n  return {\n    counter: state.counter,\n  }\n}\n\nexport default connect(mapStateToProps)(Counter);
\n

After that we have the counter state available in this.props.counter

\n

Now we want to be able to use a dispatch method from store inside a <Counter /> component, so we need to use mapDispatchToProps, and pass it as a second argument to the connect() method.

\n
const mapDispatchToProps = dispatch => {\n  return {\n    increase: () => {\n      dispatch({\n        type: 'INCREASE'\n      })\n    },\n\n    decrease: () => {\n      dispatch({\n        type: 'DECREASE'\n      })\n    }\n  }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter);
\n

The whole <Counter /> component looks like this

\n
import React, { Component } from 'react';\nimport { connect } from 'react-redux';\n\nclass Counter extends Component {\n\n  render() {\n    return (\n      <div>\n        <button onClick={() => this.props.increase()}>\n          +\n        </button>\n\n        <button onClick={() => this.props.decrease()}>\n        -\n        </button>\n        <h1>{`Result: ${this.props.counter}`}</h1>\n      </div>\n    )\n  }\n}\n\nconst mapStateToProps = state => {\n  return {\n    counter: state.counter,\n  }\n}\n\nconst mapDispatchToProps = dispatch => {\n  return {\n    increase: () => {\n      dispatch({\n        type: 'INCREASE'\n      })\n    },\n\n    decrease: () => {\n      dispatch({\n        type: 'DECREASE'\n      })\n    }\n  }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter);
\n

Ok, great! We have a Counter component ready to use.\nNow we need to create a store and reducer by copying them from the main index.js file.

\n

We can create a store folder and index.js file inside it.

\n
import { createStore, applyMiddleware } from 'redux';\nimport { createLogger } from 'redux-logger';\nimport counterReducer from './reducer'\n\nconst middleware = applyMiddleware(createLogger());\n\nexport default createStore(counterReducer, middleware);
\n

As you can see above, our createStore method needs a reducer.\nWe can copy the reducer from main index.js to the store/reducer.js file.

\n
const initialState = {\n  counter: 0\n}\n\nconst counterReducer = (state = initialState, action) => {\n  switch (action.type) {\n    case 'INCREASE':\n      return {\n        ...state,\n        counter: state.counter + 1\n      };\n    case 'DECREASE':\n      return {\n        ...state,\n        counter: state.counter - 1\n      };\n    default:\n      return state;\n  }\n}\n\nexport default counterReducer;
\n

We moved the store and the reducer into the store folder and Counter component into the Counter.js file.

\n

Now we want to import the Provider and put a Counter inside it\nProvider makes the Redux store available to the connect() calls in the component hierarchy below.\nWe need to pass a store as an argument for a Provider.

\n

After the changes, our main index.js should look like this:

\n
import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport Counter from './Counter';\n\nclass App extends Component {\n  render() {\n    return (\n      <Provider store={store}>\n        <Counter />\n      </Provider>\n    )\n  }\n}\n\nReactDOM.render(<App />, document.getElementById('root'));
\n

Congratulations! We finished this chapter!\nChapter code is here

\n

Chapter 5 - Multiple reducers using combineReducers method

\n

To combine reducers, we can use combineReducers method from redux library.\nIn the next chapter we want to fetch some data, and now we will create a data reducer for this purpose.\nAt the moment it will be a simple reducer not making any HTTP requests - we will do it later.

\n

We want to create a reducers folder inside the store, then move and rename the reducer.js file to reducers/counter.js.\nNow we can create a second reducer - reducers/data.js

\n
const initialState = {\n  fetching: false,\n  fetched: false,\n  articles: {},\n  error: ''\n}\n\nconst dataReducer = (state = initialState, action) => {\n  switch (action.type) {\n    case 'DATA_FETCHING':\n      return {\n        ...state,\n        fetching: true\n      };\n    case 'DATA_FETCHED':\n      return {\n        ...state,\n        fetching: false,\n        fetched: true,\n        articles: action.payload,\n        error: ''\n      };\n    case 'DATA_ERROR':\n      return {\n        ...state,\n        fetching: false,\n        fetched: false,\n        error: action.payload\n      }\n    default:\n      return state;\n  }\n}\n\nexport default dataReducer;
\n

The next step is to combine those reducers.\nI prepared reducers/index.js file including the combineReducers method.

\n
/// Import combineReducers method and all reducers to combine\nimport { combineReducers } from 'redux';\nimport counterReducer from './counter';\nimport dataReducer from './data';\n\n// Use combineReducers method\nconst reducer = combineReducers({\n  counter: counterReducer,\n  data: dataReducer\n});\n\n// Export combined reducers\nexport default reducer;
\n

Last step we need to do is naming changes in store/index.js file

\n
import reducer from './reducers'
\n
export default createStore(reducer, middleware);
\n

Now our state structure changed

\n

State before:\n\"Redux

\n

State after:\n\"Redux

\n

Our simple state changed, so we need to modify the counter reducer and <Counter /> component a little bit.

\n

In reducers/counter.js file change counter to result for better naming:

\n
const initialState = {\n  result: 0\n}
\n
return {\n  ...state,\n  result: state.result + 1\n};
\n

In Counter.js we have this.props.counter as an object now, so if we want to render the result value, we need to modify our code to:

\n
  <h1>{`Result: ${this.props.counter.result}`}</h1>
\n

Chapter code is here

\n

Chapter 6 - Fetching data with Redux, redux-thunk middleware, and Axios

\n

To dispatch asynchronous actions you will need redux-thunk, which\nbasically is a function that wraps an expression to delay its evaluation.

\n
npm install --save redux-thunk
\n

Go to store/index.js and import redux-thunk

\n
import thunk from 'redux-thunk';
\n

then modify the middleware

\n
const middleware = applyMiddleware(createLogger(), thunk);
\n

Ok! Thunk middleware is implemented.

\n

For fetching data I chose axios - Promise based HTTP client for the browser and node.js

\n
npm install --save axios
\n

In this chapter I want to:

\n\n

When your applications grows, the good practice is to store types in separate file as a constants.\nTo do this operation please open the store directory and create a types/index.js file.

\n

I prepared 3 constatns for use in reducer and actions.

\n
export const DATA_FETCHING = 'DATA_FETCHING';\nexport const DATA_FETCHED = 'DATA_FETCHED';\nexport const DATA_ERROR = 'DATA_ERROR';
\n

Now we can update reducers/data.js using variables instead of strings.

\n
import { DATA_FETCHING, DATA_FETCHED, DATA_ERROR } from '../types';
\n
case DATA_FETCHING
\n

instead of

\n
case 'DATA_FETCHING'
\n

How to prepare action creators for data fetching

\n

Create an action directory and dataAction.js action/dataAction.js\nImport axios and types we want to use.

\n
  import axios from 'axios';\n  import { DATA_FETCHING, DATA_FETCHED, DATA_ERROR } from '../types'
\n

Then we can create the first action creator. As I wrote above, action creator is a function which returns or dispatch an action object.\nWhile fetching the data we want to modify some UI elements, therefore we want to know when the application started the operation.

\n
export const fetchData = () => {\n  return dispatch => {\n    dispatch({\n      type: DATA_FETCHING,\n    })\n  }\n};
\n

We’ve just updated the application state.\nNow we can add some data fetching code inside the fetchData action creator.

\n
return axios.get('https://jsonplaceholder.typicode.com/posts') // Example API here\n  .then((res) => {\n    if (res.status === 200) {\n      // Here is fetching success. We can pass a res.data as a payload value\n      dispatch({\n        type: DATA_FETCHED,\n        payload: res.data\n      })\n    }\n  })\n  .catch((error) => {\n    // If we catch some error, we could dispatch an error\n    dispatch({\n      type: DATA_ERROR,\n      payload: error.response.data\n    })\n  })
\n

Whole dataAction.js looks like this

\n
import axios from 'axios';\nimport { DATA_FETCHING, DATA_FETCHED, DATA_ERROR } from '../types'\n\nexport const fetchData = () => {\n  return dispatch => {\n    dispatch({\n      type: DATA_FETCHING,\n    })\n\n    return axios.get('https://jsonplaceholder.typicode.com/posts')\n    .then((res) => {\n      if (res.status === 200) {\n        dispatch({\n          type: DATA_FETCHED,\n          payload: res.data\n        })\n      }\n    })\n    .catch((error) => {\n      dispatch({\n        type: DATA_ERROR,\n        payload: error.response.data\n      })\n    })\n  }\n};
\n

Invoking the action creator above will update the state.data.\nYour data reducer is responsible for state.data output.

\n

We are ready to use action creator. Now we can implement them in a Component.\nThere are many ways to do it.

\n

You can invoke the fetchData action creator in the componentDidMount lifecycle method, or maybe in the onClick method.

\n

For this article I prepared a simple <Data /> component.

\n
import React, { Component } from 'react';\n\nclass Data extends Component {\n\n  render() {\n    // Create articles constants for fetched articles data using ES6 destructuring\n    const { articles } = this.props.data;\n\n    return (\n      <div>\n        { /* Fetching data action invokes by clicking a button */ }\n        <button onClick={() => this.props.fetchData()}>\n          Fetch data\n        </button>\n        <ul>\n        { articles &&\n          // Map method on fetched articles\n          Object.keys(articles).map((item) => {\n            return (\n              // Render li elements\n              <li key={articles[item].id}>\n                {articles[item].title}\n              </li>\n            )\n          })\n        }\n        </ul>\n      </div>\n    )\n  }\n}
\n

Then I imported connect and fetchData action creator.

\n
import { connect } from 'react-redux';\nimport { fetchData } from './store/actions/dataAction';
\n

Finally I passed the state and dispatch actions to props, and connected it to our store.

\n
const mapStateToProps = state => {\n  return {\n    data: state.data,\n  }\n}\n\nconst mapDispatchToProps = dispatch => {\n  return {\n    fetchData: () => {\n      dispatch(fetchData())\n    }\n  }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Data);
\n

The last thing to do is to render the <Data /> component.\nGo to the main index.js file, import the Data component and put in the render() method.

\n
<Provider store={store}>\n  <div>\n    <Counter />\n    <Data />\n  </div>\n</Provider>
\n

This is it!\nWe have data fetching handled with Redux and redux-thunk.

\n

\"Redux

\n

Code here

","frontmatter":{"title":"How to implement Redux in React","subTitle":"What is Redux and how we can combine it with our application?","postAuthor":"Michał Rożenek","cover":"/img/redux.png"}},"tags":{"group":[{"name":"$OSTYPE","totalCount":1,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}}]},{"name":".env","totalCount":1,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}}]},{"name":".nvrmc","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"AUTO_INCREMENT","totalCount":1,"edges":[{"node":{"fields":{"slug":"/is-mysql-autoincrement-really-monotonic/"}}}]},{"name":"Angular","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Command","totalCount":1,"edges":[{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}}]},{"name":"DQL","totalCount":2,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}},{"node":{"fields":{"slug":"/mysql-decimal-format/"}}}]},{"name":"Data Transfer Object","totalCount":1,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}}]},{"name":"Docker","totalCount":3,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}},{"node":{"fields":{"slug":"/quick-import-of-mysql-database-dump/"}}},{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Docker Compose","totalCount":3,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}},{"node":{"fields":{"slug":"/quick-import-of-mysql-database-dump/"}}},{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Doctrine","totalCount":2,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}},{"node":{"fields":{"slug":"/mysql-decimal-format/"}}}]},{"name":"Doctrine NEW","totalCount":1,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}}]},{"name":"ES7","totalCount":1,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}}]},{"name":"Elastica","totalCount":1,"edges":[{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}}]},{"name":"Elasticsearch","totalCount":1,"edges":[{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}}]},{"name":"Elasticsearch script","totalCount":1,"edges":[{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}}]},{"name":"Express","totalCount":1,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}}]},{"name":"Git","totalCount":2,"edges":[{"node":{"fields":{"slug":"/git-not-detecting-renames-quick-workarounds/"}}},{"node":{"fields":{"slug":"/git-reverting-branch-removal/"}}}]},{"name":"Git renamed","totalCount":1,"edges":[{"node":{"fields":{"slug":"/git-not-detecting-renames-quick-workarounds/"}}}]},{"name":"HTTP","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-does-slack-communicate-with-spotify/"}}}]},{"name":"JavaScript","totalCount":3,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}},{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}},{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"Kafka","totalCount":1,"edges":[{"node":{"fields":{"slug":"/is-mysql-autoincrement-really-monotonic/"}}}]},{"name":"MySQL","totalCount":4,"edges":[{"node":{"fields":{"slug":"/mysql-decimal-format/"}}},{"node":{"fields":{"slug":"/is-mysql-autoincrement-really-monotonic/"}}},{"node":{"fields":{"slug":"/php-with-mysql-8/"}}},{"node":{"fields":{"slug":"/quick-import-of-mysql-database-dump/"}}}]},{"name":"MySQL 8","totalCount":1,"edges":[{"node":{"fields":{"slug":"/php-with-mysql-8/"}}}]},{"name":"Node.js","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"ORM","totalCount":1,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}}]},{"name":"PDO","totalCount":1,"edges":[{"node":{"fields":{"slug":"/php-with-mysql-8/"}}}]},{"name":"PDO_MYSQL","totalCount":1,"edges":[{"node":{"fields":{"slug":"/php-with-mysql-8/"}}}]},{"name":"PHP","totalCount":6,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}},{"node":{"fields":{"slug":"/mysql-decimal-format/"}}},{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}},{"node":{"fields":{"slug":"/php-with-mysql-8/"}}},{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}},{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"Phing","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"Promise","totalCount":1,"edges":[{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}}]},{"name":"Python","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"React","totalCount":2,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}},{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Redux","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"Redux store","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"SPA","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Slack","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-does-slack-communicate-with-spotify/"}}}]},{"name":"Spotify","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-does-slack-communicate-with-spotify/"}}}]},{"name":"Travis","totalCount":2,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}},{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}}]},{"name":"Vue","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"XDEBUG_CONFIG","totalCount":1,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}}]},{"name":"XDebug","totalCount":1,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}}]},{"name":"ai","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"amazon","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"apple-watch","totalCount":1,"edges":[{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"asp.net core","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"async","totalCount":2,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}},{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}}]},{"name":"autocomplete","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"await","totalCount":2,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}},{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}}]},{"name":"aws","totalCount":3,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}},{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}},{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"aws.cli","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"bash","totalCount":2,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}},{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"bitbucket","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"blazor","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"build","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"builder pattern","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"c#","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"ci","totalCount":1,"edges":[{"node":{"fields":{"slug":"/unresolved-check-from-travis-on-github-pull-request/"}}}]},{"name":"claude-code","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"cognito","totalCount":1,"edges":[{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"colors","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"continuous integration","totalCount":1,"edges":[{"node":{"fields":{"slug":"/unresolved-check-from-travis-on-github-pull-request/"}}}]},{"name":"decimal","totalCount":1,"edges":[{"node":{"fields":{"slug":"/mysql-decimal-format/"}}}]},{"name":"docker","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"ec2","totalCount":1,"edges":[{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}}]},{"name":"environment","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"equals","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"flysystem","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"front-end","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"git","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"git commit","totalCount":1,"edges":[{"node":{"fields":{"slug":"/git-not-detecting-renames-quick-workarounds/"}}}]},{"name":"git reflog","totalCount":1,"edges":[{"node":{"fields":{"slug":"/git-reverting-branch-removal/"}}}]},{"name":"git status","totalCount":1,"edges":[{"node":{"fields":{"slug":"/git-not-detecting-renames-quick-workarounds/"}}}]},{"name":"github","totalCount":3,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}},{"node":{"fields":{"slug":"/unresolved-check-from-travis-on-github-pull-request/"}}},{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"guide","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"hashcode","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"hibernate","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"java","totalCount":2,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}},{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"java.time","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"jaxb","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"jdk8","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"jpa","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"maven","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"middleware","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"mono","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"multi-stage","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"naming","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"networking","totalCount":1,"edges":[{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}}]},{"name":"ntp","totalCount":1,"edges":[{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}}]},{"name":"nvm","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"persistence","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"port 4381","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-does-slack-communicate-with-spotify/"}}}]},{"name":"pr","totalCount":1,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}}]},{"name":"production","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"project","totalCount":1,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}}]},{"name":"pull","totalCount":1,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}}]},{"name":"qa","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"razor","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"reducer","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"regex","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"repo","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"repository","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"s3","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"sass","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"setup","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"skills","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"styles","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"symfony","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"templates","totalCount":1,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}}]},{"name":"test-automation","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"transaction","totalCount":1,"edges":[{"node":{"fields":{"slug":"/is-mysql-autoincrement-really-monotonic/"}}}]},{"name":"travis","totalCount":1,"edges":[{"node":{"fields":{"slug":"/unresolved-check-from-travis-on-github-pull-request/"}}}]},{"name":"tutorial","totalCount":2,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}},{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"ubuntu","totalCount":1,"edges":[{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}}]},{"name":"unsupported","totalCount":1,"edges":[{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"uuid","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"variables","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"wasm","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"watchos","totalCount":1,"edges":[{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"web","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]}]},"author":{"id":"37bda159-ff45-50c9-aeba-18326b7ca66b","childMarkdownRemark":{"html":"

XSolve We are Agile Software House focused on PHP/Symfony, #JavaScript, #Java and #Mobile (iOS, Android, Windows Phone) #Inc5000 European company in 2018.\n
\nxsolve.software

"}},"footnote":{"id":"b4474c9b-7be6-5f34-866a-cdfffa885bce","childMarkdownRemark":{"html":""}},"site":{"siteMetadata":{"facebook":{"appId":""}}}},"pageContext":{"slug":"/how-to-implement-redux-in-react/"}}