ReduxIntroduction
devguides.io / Redux

Redux

Redux is used to manage data in a React application. Using redux means you create a store that a React app listens to.

import { createStore } from 'redux'

var store = createStore()

What's a store? Next

Stores

Think of a store as a bunch of data. In fact, you may have already done this: the example here is a plain JS object that stores data.

var album = {
  title: 'Kind of Blue',
  artist: 'Miles Davis',
  year: 1959
}

You can read and write data into a plain JS object. You can do the same in Redux, but just a little differently.

How would you do that in Redux? Next

Our first store

Stores are created using createStore().

import { createStore } from 'redux' 

var reducer = 
var store = createStore(reducer, album)

You can read from a store by checking its state using getState(). Writing data works a bit different, though. That's where reducer comes in.


Further reading...

How do you write to a store? Next

Updating the store

You can't change the store's state from outside the store. To do that, you'll need to create actions. Actions are made through reducer functions, which is used by createStore().

import { createStore } from 'redux' 

var store = createStore(reducer, article)

function reducer (state, action) {
  if (action.type === 'PUBLISH') {
    return { ...state, published: true }
  } else {
    return state
  }
}

Reducers take the current state and return a new one. How it changes the store depends on action.


To run an action, use dispatch(). This changes the store's state.

Also see: Reducer docs

What does ...state mean? Next

The spread operator

The ... symbol is the object spread operator. It's available in Babel and in the 2017 version of JavaScript. These two are roughly equivalent.

return { ...state, published: true }
return {
  title: state.title,
  body: state.body,
  published: true
}
The contents of state is rolled out in place of ...state.

Also see: Object spread docs

Let's learn more about actions. Next

Dispatching actions

The only way to change the store's state is by dispatching actions. You can then easily make a log of what actions have happened, or even undo them.


You can also listen for changes in the store using subscribe().

Let's recap what we've learned. Next

Recap

Stores are made from reducer functions.

import { createStore } from 'redux' 
store = createStore(reducer, {initial state})

Actions are dispatched to the reducer.

store.dispatch({ type: 'PUBLISH' })

Reducers tell us how to change a state based on an action.

function reducer (state, action) {
  if (action.type === 'PUBLISH') {
    return { ...state, published: true }
  }
  return state
}

States: the store keeps a state, and you can listen for updates using subscribe().

store.getState().published
store.subscribe(() => {  })

Let's learn more about actions. Next chapter