React Testing: The Redux Store - Multiple Actions
When using Redux, we can test that our application state changes are working by testing that dispatching actions to the store creates our expected output. In this lesson we will run a few realistic actions back to back (as if the user is using the app) and then test that the state tree looks as we expect it to. These types of tests that ensure all of your redux logic is working as expected give you a lot of value for not too much effort (they test your entire app's state in one big swoop). You may also find it useful to add more granular/individual tests for your reducers and/or actions, which we will cover in other lessons in this course.
NOTE: This lesson assumes you have used Redux. If you are new to Redux, it is recommended that you first watch the Getting Started With Redux course.
Course
React Testing Cookbook
It seems like a better approach may be to test your action creators as pure functions returning state. What do you think?
Kamuela, you could do that. I personally use the store tests to test how all of the actions work back-to-back (to ensure the entire app is working as expected) - as is done in this lesson. Then, I test individual state updates in the reducer tests - as is done in the "React Testing - Redux Reducers" lesson: https://egghead.io/lessons/react-testing-redux-reducers?series=react-testing-cookbook.
There are a lot of different ways to go about testing; I don't think there is a single "better approach". In my opinion, as long as you are testing things that are important to you (things you want to ensure don't break in your application without you knowing about it), that's all that matters :)
Thanks for watching and for your input!
I am going thru your testing videos on egghead, and browsing your code.
I noticed your "state" is split into various folders, and I am curious why.
ie:
src/state/store.js
which references outside of it, into "other" stores:
/src/home/quote/state/
So, you have a "store" that sits in "state" folder -- that then references "state" in other outside directories.
The reason I ask is because I am wrapping my head around Redux right now, and want to make sure I am understanding convention.
Hi Dean,
To be clear, a Redux app (including this one) only has one store; in this course, the store is located in src/state/store.js. However, the store can compose together multiple reducers. In small Redux apps, there might be only one reducer (as shown in the counter-vanilla official Redux example). As the app grows, it makes sense to add more reducers. You can put these reducers wherever you want as long as you compose them together in a main reducer, then use that main reducer in your store correctly. For example, the counter official Redux example has a "reducers" folder with all of the reducers in it. In my favorite-quotes repo for this course, I place each reducer with its own feature folder (src/home/quote, src/home/theme etc.); I personally like to organize my code by features instead of by type using a pattern like https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346.
If you have questions about how Redux Reducers and the store work, the official Redux docs are awesome: http://redux.js.org/
Hope this helps :)