. Part 1 — Link . Part 2 — Link Part 3 — You’re here now. . Part 4 — Link Redux My overly-simplified explanation is; A UI element dispatches an action, that action is an object that contains only the relevant information, the action is sent to the reducer, the reducer receives the current state of the app and the action and returns a new state, the UI is subscribed to the state and efficiently updates when said state changes. We’re talking about , based on the Flux architecture, , read it if you’re not already familiar. Redux here is a really good explanation The submitTodo action We’ll use a file to ensure consistency, eliminate silly syntax errors and help document our code: constants Since we’ll be using a more than once we may as well set it up as a const in the scope of the . Line 7 todoText describe This is the action we’re going to expect our App to dispatch when we call the function with our as the argument. It’s the bare minimum that our Redux will need in order to store this todo; a so the reducer knows what kind of action this is, an so it has a unique identifier, and the of the todo itself. Line 10 — 14 submitTodo todoText reducer type id text The assertion. Line 16 Our failing test tells us what to build, so let’s create the action: Create a mutable variable to hold our . Line 3 id A helper method that increments the then returns it. Line 5 — 8 nextId id Our action that takes the as an argument and returns an object that will be dispatched to our reducer. Line 11 — 17 text Just saying is shorthand for . Line 15 text, text: text, Our test should be passing. Git commit State of the repository The submitTodo reducer This is where we store and return new states based on actions. Firstly we could test that it returns an upon instantiation: initialState We import the itself and its variable. Line 3 reducer initialState Assert that when we call the with no state and an empty action that it properly returns our expected . Line 7 reducer initialState Let’s make our test pass: Export an module from this file. Line 1 initialState Export the , it’s a function that takes (defaulting to ) and as its arguments and simply returns . As this reducer returns new states Redux will keep a track of it and use said new state in future reductions. Line 3 reducer state initialState action state Export the by default when we import this file. Line 5 reducer Now let’s test that it can receive our action and return a new, correct state: submitTodo Import our constants. Line 3 types Set up a variable to help with assertion consistency. Line 7 todoText Set up the action we expect to pass to our reducer. Line 15 — 19 Set up the expected return , containing an array of , with our brand new todo plonked in to it. Line 21 — 28 state todos Our test shows us what is wrong, we’re expecting a new state to be returned with the todo we’ve submitted but we’re still just getting an empty object. So let’s fix it: initialState import the module to give us our . Line 1 types constants Change our to include a key which is an empty array on instantiation. This will end up being an array of todo objects. Line 3 — 5 initialState todos We’ve refactored our reducer to be a function that does more than simply return the . Line 7 initialState We use a standard statement to return new computed states based on the . Line 8 switch action.type In the case that our action type is “ ” we return this object representation of state. Line 10 — 11 SUBMIT_TODO The gist of this syntax is; we want to start by returning whatever exists and then overwrite the new things we want to add, remove or change. Line 12 — 19 Return the unpacked state, that means all the contents of state including the empty array. Line 12 todos Overwrite the key with this array. Line 13 todos This array contains whatever our current state’s array happens to contain, whether that’s nothing at all or dozens of todo objects. Line 14 todos Now add a new object to this array and give it an of the we pass in, and give it a of the we pass in. Line 15 — 18 id action.id text action.text Therefore we’ve just returned a new representation of state that contains the existing state plus the new todo we’ve just submitted. Hope that makes sense. The default return of our reducer, should no be present that we can handle, is just the existing state. Line 22 — 23 action.type Our reducer unit test now passes. So technically our code now knows how to add a todo to the state, now we just need to set up Redux and connect things up through our component. App Git commit State of the repository Wiring up Redux First we need to install and as dependencies. redux react-redux npm install --save redux react-redux is completely separate from and is just a way to manage state, a single source of truth for our app. redux React provides us React bindings for . react-redux redux So let’s create our store: import the and sub modules from . Line 1 combineReducers createStore redux import our reducer which is capable of returning new states of the store. Line 2 Superfluous at this point because we only have one reducer, but as our App scales we will want reducers to have manageable responsibility and would use to combine them in to one for our store to use. Line 4 — 6 combineReducers We export our store as default. Simple. Line 8 Then: import the module from , it’s one purpose is to provide the store to all wrapped child components, in this case our App and all it’s sub components. Line 5 Provider react-redux React-redux-connect explained. import the we created above. Line 7 store We’ve done two things here; Refactor our code to be slightly more legible, and wrap our in our in which we pass in our reducer and redux-store as the . Line 10 — 15 App Provider store Add an eslint exception for the element look up in our render method. Line 1 document And finally: import so we can expose necessary part of redux to our App. Line 2 connect import our we created previously so we can dispatch them in our components. Line 5 actions As the name suggests, we’re preparing our state as created in our to our properties to be consumed by our component. Line 18 store.js And same again, we’re preparing the dispatchable actions in our App to properties that can be used in our components. Line 20 We have created our dispatch event that takes a argument and if it’s not falsey it will dispatch our function. Line 21 — 25 submitTodo text actions.submitTodo The module now finishes the job off, it gives our App access to the only two ways in which it can interact with state; Dispatching actions and subscribing to state. This now becomes our default export from this file. Line 28 connect Another interpretation would be; Telling the store how to change and reading the state of it. import for our prop validation. Line 3 PropTypes Validate the function we’re about to pass in. Line 14 — 16 submitTodo Our has given us access to as a prop so we simply pass it in to our . Line 7 connect submitTodo App Note: We’ve changed this to not be the default export, the connected App is the default, but we still expose it for our test later. And then we pass it down to the component that needs it. Line 10 AddTodo Finally update the test: We have to go from importing to instead since we want to test this component in isolation without using the entire connected component, which would require we pass in a and . Line 5 App { App } Provider store Bring in the to use as our App’s state. Line 6 initialState Create a mock function for . Line 9 submitTodo Refactor a little to make the code readable and easier to extend, then consume the and . Line 11 — 15 state submitTodo Here’s a clear and concise explanation of . redux and connect You will probably also find the useful, and be amazed at how small and simple it really all is. react-redux API docs We don’t have our todos displaying yet but they can actually be entered via the UI and store in state. Grab the and type in a todo and then click submit. Chrome React devtools extension Now go and view the store and see it appear: Storing a todo in state . Git commit . State of the repository Recap We’ve learned how to: Test drive creation of an action. Test drive creation of a reducer. Wire up Redux to our App so it can dispatch events and subscribe to state. Up next Let’s start making the most of being able to subscribe to state and actually start displaying some of these todos! . Part 1 — Link . Part 2 — Link Part 3 — You’re here now. . Part 4 — Link

Google

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

A guide to TDD a React/Redux TodoList App — Part 3

Too Long; Didn't Read

Company Mentioned

Sanjay Purswani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

A guide to TDD a React/Redux TodoList App — Part 3

Too Long; Didn't Read

Company Mentioned

Sanjay Purswani

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES