redux components

What are “actions” in Redux?

this is answered a couple of questions below.

What is the role of reducers in Redux?

so is this one.

What is the meaning of “single source of truth” in Redux?

in redux, single source of truth refers to the global state that results from its proper implementation (i.e. a decent amount of boilerplate, which is definitely worth it if you find yourself struggling with your app’s state in a given framework). state can now be passed around and manipulated (reused) across components as props.

Explain the components of Redux.

store: in redux, this is where your state, reducers, and middleware are combined.

reducers: reducers are the functions which manipulate and/or return your (now) global state.

actions: actions are where redux keeps the global values that get passed into any given reducer function. for example:

export const addUser = (user) => {
  return {
    type: "ADD_USER",
    value: user
  }
}

in the above example, user is the value which could then be passed in later as a string (or whatever) to the reducer, which can now manipulate this value in an unlimited number of ways before returning it as your app’s new state. the addUser function can then be called in a “dumb” or “presentational” component via an onClick callback with “user1” as its argument… onClick={() => props.addUser('user1')}

middleware: Examples of middleware include logging, crash reporting, routing, handling asynchronous requests, etc. you would plug these into your createStore method (in your store.js), after your reducers and state, and with its argument as whatever particular middleware you’re using. e.g.:

import { createStore, middleWare } from 'redux'
import thunk from 'redux-thunk'
import reducers from './reducers'
import state from './state'
export default createStore(reducers, state, applyMiddleware(thunk))