{"id":21305,"date":"2023-05-04T07:30:07","date_gmt":"2023-05-04T14:30:07","guid":{"rendered":"https:\/\/www.jamasoftware.com\/?p=21305"},"modified":"2024-01-18T00:21:45","modified_gmt":"2024-01-18T08:21:45","slug":"lets-write-redux","status":"publish","type":"post","link":"https:\/\/www.jamasoftware.com\/legacy\/blog\/2023\/05\/04\/lets-write-redux\/","title":{"rendered":"Let’s Write Redux!"},"content":{"rendered":"

\"Redux\"<\/p>\n

“What I cannot create, I do not understand.”<\/p>\n

Richard Feynman<\/cite><\/p><\/blockquote>\n

Redux is pretty simple. You have action creators, actions, reducers, and a store. What’s not so simple is figuring out how to put everything together in the best or most “correct” way. In this blog, we begin by explaining the motivation behind using Redux and highlight its benefits, such as predictable state management and improved application performance. It then delves into the core concepts of Redux, including actions, reducers, and the store, providing a step-by-step guide on how to implement Redux in a JavaScript application. We will emphasize the importance of understanding Redux’s underlying principles and showcases code examples to illustrate its usage.<\/p>\n

To rewrite Redux, we used a wonderful article by Lin Clark as a reference point, as well as the Redux codebase itself<\/a>, and of course, the Redux docs<\/a>.<\/p>\n

\n

You may note we’re using traditional pre-ES6 Javascript throughout this article. It’s because everyone who knows Javascript knows pre-ES6 JS, and we want to make sure we don’t lose anyone because of syntax unfamiliarity.<\/p>\n<\/div>\n

The Store<\/h2>\n

Redux, as is the same with any data layer, starts with a place to store information. Redux, by definition of the first principle<\/a> of Redux, is a singular shared data store<\/em>, described by its documentation as a “Single source of truth”, so we’ll start by making the store a singleton:<\/p>\n

var store;\r\n\r\nfunction getInstance() { \r\n if (!store) store = createStore();\r\n return store;\r\n}\r\n\r\nfunction createStore() { \r\n return {}; \r\n}\r\n\r\nmodule.exports = getInstance();\r\n<\/code><\/pre>\n
The dispatcher<\/h3>\n
The next principle is that the state of the store can only change in one way: through the dispatching of actions. So let’s go ahead and write a dispatcher.<\/p>\n
However, in order to update state in this dispatcher, we’re going to have to have<\/em> state to begin with, so let’s create a simple object that contains our current state.<\/p>\n
function createStore() { \r\n var currentState = {}; \r\n}<\/code><\/pre>\n
Also, to dispatch an action, we need a reducer to dispatch it to. Let’s create a default one for now. A reducer receives the current state and an action and then returns a new version of the state based on what the action dictates:<\/p>\n
function createStore() { \r\n var currentState = {}; \r\n\r\n var currentReducer = function(state, action) { \r\n  return state; \r\n } \r\n}<\/code><\/pre>\n
This is just a default function to keep the app from crashing until we formally assign reducers, so we’re going to go ahead and just return the state as is. Essentially a “noop”.<\/p>\n
The store is going to need a way to notify interested parties that an update has been dispatched, so let’s create an array to house subscribers:<\/p>\n
function createStore() { \r\n var currentState = {}; \r\n \r\n var currentReducer = function(state, action) { \r\n  return state; \r\n } \r\n \r\n var subscribers = []; \r\n}<\/code><\/pre>\n
Cool! OK, now we can finally put that dispatcher together. As we said above, actions<\/em> are handed to reducers along with state<\/em>, and we get a new state<\/em> back from the reducer. If we want to retain the original state before the change for comparison purposes, it probably makes sense to temporarily store it.<\/p>\n
Since an action<\/em> is dispatched<\/em>, we can safely assume the parameter a dispatcher receives is an action.<\/p>\n
function createStore() { \r\n var currentState = {}; \r\n\r\n var currentReducer = function(state, action) { \r\n  return state; \r\n } \r\n\r\n var subscribers = [];\r\n\r\n function dispatch(action) {\r\n  var prevState = currentState;\r\n }\r\n\r\n return {\r\n  dispatch: dispatch\r\n };\r\n}<\/code><\/pre>\n
We also have to expose the dispatch<\/code> function so it can actually be used when the store is imported. Kind of important.<\/p>\n
So, we’ve created a reference to the old state. We now have a choice: we could either leave it to reducers to copy the state and return it, or we can do it for them. Since receiving a changed copy of the current state is part of the philosophical basis of Redux, we’re going to go ahead and just hand the reducers a copy to begin with.<\/p>\n
function createStore() { \r\n var currentState = {}; \r\n\r\n var currentReducer = function(state, action) { \r\n  return state; \r\n } \r\n\r\n var subscribers = [];\r\n\r\n function dispatch(action) {\r\n  var prevState = currentState;\r\n  currentState = currentReducer(cloneDeep(currentState), action);\r\n }\r\n\r\n return {\r\n  dispatch: dispatch\r\n };\r\n}<\/code><\/pre>\n
We hand a copy of the current state and the action to the currentReducer, which uses the action to figure out what to do with the state. What is returned is a changed version of the copied state, which we then use to update the state. Also, we’re using a generic cloneDeep<\/code>implementation (in this case, we used lodash’s) to handle copying the state completely. Simply using Object.assign<\/code> wouldn’t be suitable because it retains references to objects contained by the base level object properties.<\/p>\n
Now that we have this updated state, we need to alert any part of the app that cares. That’s where the subscribers come in. We simply call to each subscribing function and hand them the current state and also the previous state, in case whoever’s subscribed wants to do delta comparisons:<\/p>\n
function createStore() { \r\n var currentState = {}; \r\n\r\n var currentReducer = function(state, action) { \r\n  return state; \r\n } \r\n\r\n var subscribers = []; \r\n\r\n function dispatch(action) {\r\n  var prevState = currentState;\r\n  currentState = currentReducer(cloneDeep(currentState), action);\r\n  subscribers.forEach(function(subscriber){\r\n   subscriber(currentState, prevState);\r\n  });\r\n }\r\n\r\n return {\r\n  dispatch: dispatch\r\n };\r\n}<\/code><\/pre>\n
Of course, none of this really does any good with just that default noop reducer. What we need is the ability to add reducers, as well.<\/p>\n
\n
RELATED: <\/strong> New Research Findings: The Impact of Live Traceability\u2122 on the Digital Thread<\/a><\/span><\/span><\/h4>\n
\n
Adding Reducers<\/h3>\n
In order to develop an appropriate reducer-adding API, let’s revisit what a reducer is, and how we might expect reducers to be used.<\/p>\n
In the Three Principles<\/a> section of Redux’s documentation, we can find this philosophy:<\/p>\n
“To specify how the state tree is transformed by actions, you write pure reducers.”<\/p><\/blockquote>\n
So what we want to accommodate is something that looks like a state tree, but where the properties of the state are assigned functions that purely change their state.<\/p>\n
{ \r\n stateProperty1: function(state, action) { \r\n  \/\/ does something with state and then returns it\r\n }, \r\n stateProperty2: function(state, action) { \r\n  \/\/ same \r\n }, ... \r\n}<\/code><\/pre>\n
Yeah, that looks about right. We want to take this state tree object and run each of its reducer functions every time an action is dispatched.<\/p>\n
We have currentReducer<\/code> defined in the scope, so let’s just create a new function and assign it to that variable. This function will take the pure reducers we passed to it in the state tree object, and run each one, returning the outcome of the function to the key it was assigned.<\/p>\n
function createStore() { \r\n var currentReducer = function(state, action) { \r\n  return state; \r\n } ...\r\n\r\n function addReducers(reducers) {\r\n  currentReducer = function(state, action) {\r\n   var cumulativeState = {};\r\n   \r\n   for (key in reducers) {\r\n    cumulativeState[key] = reducers[key](state[key], action);\r\n   }\r\n  \r\n   return cumulativeState;\r\n  }\r\n }\r\n}<\/code><\/pre>\n
Something to note here: we’re only ever handing a subsection of the state to each reducer, keyed from its associated property name. This helps simplify the reducer API and also keeps us from accidentally changing other state areas of the global state. Your reducers should only be concerned with their own particular state, but that doesn’t preclude your reducers from taking advantage of other properties in the store.<\/p>\n
As an example, think of a list of data, let’s say with a name “todoItems”. Now consider ways you might sort that data: by completed tasks, by date created, etc. You can store the way you sort that data into separate reducers (byCompleted and byCreated, for example) that contain ordered lists of IDs from the todoItems data, and associate them when you go to show them in the UI. Using this model, you can even reuse<\/em> the byCreated property for other types of data aside from todoItems! This is definitely a pattern recommended in the Redux docs<\/a>.<\/p>\n
Now, this is fine if we add just one single set of reducers to the store, but in an app of any substantive size, that simply won’t be the case. So we should be able to accommodate different portions of the app adding their own reducers. And we should also try to be performant about it; that is, we shouldn’t run the same reducers twice.<\/p>\n
\/\/ State tree 1 \r\n{ \r\n visible: function(state, action) { \r\n  \/\/ Manage visibility state \r\n } ... \r\n}\r\n\/\/ State tree 2\r\n{ \r\n visible: function(state, action) { \r\n  \/\/ Manage visibility state (should be the same function as above) \r\n } ... \r\n}<\/code><\/pre>\n
In the above example, you might imagine two separate UI components having, say, a visibility reducer that manages whether something can be seen or not. Why run that same exact reducer twice? The answer is “that would be silly”. We should make sure that we collapse by key name for performance reasons, since all reducers are run each time an action is dispatched.<\/p>\n
So keeping in mind these two important factors — ability to ad-hoc add reducers and not adding repetitive reducers — we arrive to the conclusion that we should add another scoped variable that houses all reducers added to date.<\/p>\n
... \r\nfunction createStore() { \r\n ... \r\n var currentReducerSet = {};\r\n\r\n function addReducers(reducers) {\r\n  currentReducerSet = Object.assign(currentReducerSet, reducers);\r\n\r\n  currentReducer = function(state, action) {\r\n   var cumulativeState = {};\r\n\r\n   for (key in currentReducerSet) {\r\n    cumulativeState[key] = currentReducerSet[key](state[key], action);\r\n   }\r\n \r\n   return cumulativeState;\r\n  }\r\n\r\n }\r\n ...\r\n}\r\n...<\/code><\/pre>\n
The var currentReducerSet<\/code> is combined with whatever reducers are passed, and duplicate keys are collapsed. We needn’t worry about “losing” a reducer because two reducers will both be the same if they have the same key name. Why is this?<\/p>\n
To reiterate, a state tree is a set of key-associated pure reducer functions<\/em>. A state tree property and a reducer have a 1:1 relationship. There should never be two different reducer functions associated with the same key.<\/p>\n
This should hopefully illuminate for you exactly what is expected of reducers: to be a sort of behavioral definition of a specific property. If we have a “loading” property, what we’re saying with my reducer is that “this loading property should respond to this set specific actions in these particular ways”. We can either directly specify whether something is loading — think action name “START_LOADING“<\/em> — or we can use it to increment the number of things that are loading by having it respond to action names of actions that we know are asynchronous, such as for instance “<\/em>LOAD_REMOTE_ITEMS_BEGIN” and “LOAD_REMOTE_<\/em>ITEMS_END”.<\/p>\n
Let’s fulfill a few more requirements of this API. We need to be able to add and remove subscribers. Easy:<\/p>\n
function createStore() { \r\n var subscribers = []; \r\n ... \r\n\r\n function subscribe(fn) { \r\n  subscribers.push(fn); \r\n }\r\n\r\n function unsubscribe(fn) {\r\n  subscribers.splice(subscribers.indexOf(fn), 1);\r\n }\r\n\r\n return {\r\n  ...\r\n  subscribe: subscribe,\r\n  unsubscribe: unsubscribe\r\n };\r\n}<\/code><\/pre>\n
And we need to be able to provide the state when someone asks for it. And we should provide it in a safe way, so we’re going to only provide a copy of it. As above, we’re using a cloneDeep<\/code> function to handle this so someone can’t accidentally mutate the original state, because in Javascript, as we know, if someone changes the value of a reference in the state object, it will change the store state.<\/p>\n
function createStore() { \r\n ... \r\n\r\n function getState() { \r\n  return cloneDeep(currentState); \r\n }\r\n\r\n return {\r\n  ...\r\n  getState: getState\r\n };\r\n}<\/code><\/pre>\n
And that’s it for creating Redux! At this point, you should have everything you need to be able to have your app handle actions and mutate state in a stable way, the core fundamental ideas behind Redux.<\/p>\n
Let’s take a look at the whole thing (with the lodash library):<\/p>\n
var _ = require('lodash'); \r\nvar globalStore;\r\n\r\nfunction getInstance(){ \r\n if (!globalStore) globalStore = createStore();\r\n return globalStore;\r\n}\r\n\r\nfunction createStore() { \r\n var currentState = {}; \r\n var subscribers = []; \r\n var currentReducerSet = {}; \r\n currentReducer = function(state, action) { \r\n  return state; \r\n };\r\n \r\n function dispatch(action) {\r\n  var prevState = currentState;\r\n  currentState = currentReducer(_.cloneDeep(currentState), action);\r\n  subscribers.forEach(function(subscriber){\r\n   subscriber(currentState, prevState);\r\n  });\r\n }\r\n \r\n function addReducers(reducers) {\r\n  currentReducerSet = _.assign(currentReducerSet, reducers);\r\n  currentReducer = function(state, action) {\r\n   var ret = {};\r\n   _.each(currentReducerSet, function(reducer, key) {\r\n    ret[key] = reducer(state[key], action);\r\n   });\r\n   return ret;\r\n  };\r\n }\r\n\t\r\n function subscribe(fn) {\r\n  subscribers.push(fn);\r\n }\r\n\t\r\n function unsubscribe(fn) {\r\n  subscribers.splice(subscribers.indexOf(fn), 1);\r\n }\r\n\t\r\n function getState() {\r\n  return _.cloneDeep(currentState);\r\n }\r\n\t\r\n return {\r\n  addReducers,\r\n  dispatch,\r\n  subscribe,\r\n  unsubscribe,\r\n  getState\r\n };\r\n}\r\nmodule.exports = getInstance();<\/code><\/pre>\n
So what did we learn by rewriting Redux?<\/h2>\n
We learned a few valuable things in this experience:<\/p>\n
    \n
  1. We must protect and stabilize the state of the store. The only way a user should be able to mutate state is through actions.<\/li>\n
  2. Reducers are pure functions in a state tree. Your app’s state properties are each represented by a function that provides updates to their state. Each reducer is unique to each state property and vice versa.<\/li>\n
  3. The store is singular and contains the entire state of the app. When we use it this way, we can track each and every change to the state of the app.<\/li>\n
  4. Reducers can be thought of as behavioral definitions of state tree properties.<\/li>\n<\/ol>\n
    \n
    RELATED: <\/strong>Leading Quantum Computing Company, IonQ, Selects Jama Connect\u00ae<\/sup> to Decrease Review Cycles, Reduce Rework<\/a><\/span><\/span><\/h4>\n
    \n
    Bonus section: a React adapter<\/h2>\n
    Having the store is nice, but you’re probably going to want to use it with a framework. React is an obvious choice, as Redux was created to implement Flux, a core principle data architecture of React. So let’s do that too!<\/p>\n
    You know what would be cool? Making it a higher-order component, or HOC as you’ll sometimes see them called. We pass an HOC a component, and it creates a new component out of it. And it is also able to be infinitely nested, that is, HOCs should be able to be nested within each other and still function appropriately. So let’s start with that basis:<\/p>\n
    Note: Going to switch to ES6 now, because it provides us with class extension, which we’ll need to be able to extend React.Component<\/code>.<\/em><\/p>\n
    import React from 'react';\r\nexport default function StoreContainer(Component, reducers) { \r\n\treturn class extends React.Component { }\r\n}<\/code><\/pre>\n
    When we use StoreContainer, we pass in the Component class — either created with React.createClass<\/code> or React.Component<\/code> — as the first parameter, and then a reducer state tree like the one we created up above:<\/p>\n
    \/\/ Example of StoreContainer usage \r\nimport StoreContainer from 'StoreContainer'; \r\nimport { myReducer1, myReducer2 } from 'MyReducers';\r\n\r\nStoreContainer(MyComponent, { \r\n myReducer1, \r\n myReducer2\r\n});<\/code><\/pre>\n
    Cool. So now we have a class being created and receiving the original component class and an object containing property-mapped reducers.<\/p>\n
    So, in order to actually make this component work, we’re going to have to do a few bookkeeping tasks:<\/p>\n
      \n
    1. Get the initial store state<\/li>\n
    2. Bind a subscriber to the component’s setState<\/code> method<\/li>\n
    3. Add the reducers to the store<\/li>\n<\/ol>\n
      We can bootstrap these tasks in the constructor lifecycle method of the Component. So let’s start with getting the initial state.<\/p>\n
      ... \r\nexport default function StoreContainer(Component, reducers) { \r\n return class extends React.Component { \r\n \r\n  constructor() { \r\n   super(props); \r\n   \/\/ We have to call this to create the initial React \r\n   \/\/ component and get a `this` value to work with \r\n   this.state = store.getState(); \r\n  } \r\n\r\n } \r\n}<\/code><\/pre>\n
      Next, we want to subscribe the component’s setState<\/code> method to the store. This makes the most sense because setting state on the component will then set off the top-down changes the component will broadcast, as we’d want in the Flux model.<\/p>\n
      We can’t, however, simply send this.setState<\/code> to the subscribe<\/code> method of the store — their parameters don’t line up. The store wants to send new and old state, and the setState<\/code> method only accepts a function as the second parameter.<\/p>\n
      So to solve this, we’ll just create a marshalling function to handle it:<\/p>\n
      ... \r\nimport store from '.\/Store';\r\n\r\nfunction subscriber(currentState, previousState) { \r\n this.setState(currentState); \r\n}\r\n\r\nexport default function StoreContainer(Component, reducers) { \r\n return class extends React.Component { \r\n\r\n  constructor() { \r\n   ... \r\n   this.instSubscriber = subscriber.bind(this); \r\n   store.subscribe(this.instSubscriber);\r\n  }\r\n\r\n  componentWillUnmount() {\r\n   store.unsubscribe(this.instSubscriber);\r\n  }\r\n }\r\n}\r\n...<\/code><\/pre>\n
      Since the store is a singleton, we can just import that in and call on its API directly.<\/p>\n
      Why do we have to keep the bound subscriber around? Because binding it returns a new function. When unmounting the component, we want to be able to unsubscribe to keep things clean. We know that the store merely looks for the function reference in its internal subscribers array and removes it, so we need to make sure we keep that reference around so we can get it back when we need to identify and remove it.<\/p>\n
      One last thing to do in the constructor: add the reducers. This is as simple as passing what we received to the HOC into the store.addReducers method:<\/p>\n
      ... \r\nexport default function StoreContainer(Component, reducers) { \r\n return class extends React.Component { \r\n  ... \r\n  constructor() { \r\n   ... \r\n   store.addReducers(reducers); \r\n  } \r\n  ... \r\n } \r\n}\r\n...<\/code><\/pre>\n
      So now we’re ready to provide the rendering of the component. This is the essence of HOCs. We take the Component we received and render it within the HOC, imbuing it with whatever properties the HOC needs to provide it:<\/p>\n
      ... \r\nexport default function StoreContainer(Component, reducers) { \r\n return class extends React.Component { \r\n  ... \r\n  render() { \r\n   return (<Component {...this.props} {...this.state} \/>); \r\n  } \r\n } \r\n} \t\t\t\r\n...<\/code><\/pre>\n
      We are “spreading<\/a>” the properties and state of the HOC down to the Component it is wrapping. This effectively ensures that whatever properties we pass to the HOC get down to the component it wraps, a vital feature of infinitely nestable HOCs. It may or may not be wise to place the state as properties on the Component, but it worked well in my testing, and it was nice being able to access to the state through the this.props<\/code> object of the Component that is wrapped, as you might expect to normally do with a React component that receives data from a parent component.<\/p>\n
      Here’s the whole shabang:<\/p>\n
      import React from 'react'; import store from '.\/Store';\r\nfunction subscriber(currentState, previousState) { \r\n this.setState(currentState);\r\n}\r\n\r\nexport default function StoreContainer(Component, reducers) {\r\n return class extends React.Component { \r\n  \r\n  constructor(props) { \r\n   super(props); \r\n   this.state = store.getState(); \r\n   this.instSubscriber = subscriber.bind(this); \r\n   store.subscribe(this.instSubscriber);\r\n   store.addReducers(reducers); \r\n  }\r\n \r\n  componentWillUnmount() {\r\n   store.unsubscribe(this.instSubscriber);\r\n  }\r\n  \r\n  render() {\r\n   return (<Component {...this.props} {...this.state} \/>);\r\n  }\r\n }\r\n}<\/code><\/pre>\n
      Implementation of using StoreContainer:<\/p>\n
      import StoreContainer from 'StoreContainer'; \r\nimport { myReducer } from 'MyReducers';\r\nlet MyComponent extends React.Component { \r\n \/\/ My component stuff \r\n}\r\nexport default StoreContainer(MyComponent, { myReducer });\r\n<\/code><\/pre>\n
      Implementation of using the Component that uses StoreContainer (exactly the same as normal):<\/p>\n
      import MyComponent from 'MyComponent'; \r\nimport ReactDOM from 'react-dom';<\/code><\/pre>\n
      ReactDOM.render(<MyComponent myProp=’foo’ \/>, document.body);<\/p>\n
      But you don’t have to define the data basis of your MyComponent<\/code> immediately or in a long-lasting class definition; you could also do it more ephemerally, in implementation, and perhaps this is wiser for more generalized components:<\/p>\n
      import StoreContainer from 'StoreContainer'; \r\nimport { myReducer } from 'MyReducers'; \r\nimport GeneralizedComponent from 'GeneralizedComponent'; \r\nimport ReactDOM from 'react-dom';\r\nlet StoreContainedGeneralizedComponent = StoreContainer(GeneralizedComponent, { myReducer });\r\nReactDOM.render(<StoreContainedGeneralizedComponent myProp='foo' \/>, document.body);\r\n<\/code><\/pre>\n
      This has the benefit of letting parent components control certain child component properties.<\/p>\n
      Conclusion<\/h2>\n
      By gaining a solid understanding of Redux through this blog, we hope teams can enhance their state management and write efficient, scalable code.<\/p>\n
      In addition to leveraging Redux, teams can further optimize their product development process by utilizing Jama Connect\u00ae<\/sup>‘s powerful features, such as Live Traceability\u2122<\/a> and Traceability Score\u2122<\/a>, to improve engineering quality and speed up time to market.<\/p>\n
      Jama Connect empowers teams with increased visibility and control by enabling product development to be synchronized between people, tools, and processes across the end-to-end development lifecycle. Learn more here.\u00a0<\/a><\/p>\n
      \n
      <\/p>\n
      <\/div>\n