The Low Down

• State is managed by Redux
• State is persisted by Redux-Persist
• Redux-Sagas handles asynchronous calls to the database.

It is important for you to understand how state works. Learn from the resources linked to above, and poke around in the project to learn how Walkertreker has implemented Redux state management. A few notes:

• The Redux Action Types are located in walkertreker/arc/constants/actionTypes.js
• The Redux Initial States are located in walkertreker/arc/constants/InitialStates
• The Redux Reducers are located in walkertreker/src/store/reducers
• The Redux Sagas are located in walkertreker/src/sagas.js
• The Redux Store and persistor are located in walkertreker/src/store/index.js

Tools to Manage Local State

An In-Depth Look At walkertreker/src/store/index.js

1. How State is Persisted

• Yellow Box: This is the area where Redux grabs the local persisted state and loads it into the app.
• Red Arrow: These two lines of code show the store.getState() function that grabs persisted state

Your tools:

• Yellow Arrow: points out how you can load a specific campaign and player, by hard coding their ids into the appropriate location.
• Pink arrow: points to code that clears local state, so that the store.getState() function will not return anything.

2. Loading a Specific Campaign and Player

• Comment out the code that the red arrow points to in the above picture:

// const playerId = store.getState().player.id || null;

// const campaignId = store.getState().campaign.id || null;

• Comment in the code that the yellow arrow points to in the above picture:

const playerId = "217067b0-91d5-4359-8e1a-e89f3ef1172b";

const campaignId = "889f019c-a51d-412f-bc5f-29898e1e255e";

• Update values with the ids relevant to the campaign/player you wish to load.

3. How to Clear Persisted State

• Red Box: there are two methods to clear state:

1. purgeStoredState(persistConfig); requires an import that the red arrow points to
2. persistConfig.storage.clear(); does not require an import

Note:

• You can use either or both methods
• These will need to be remove for production
• If you clear persisted storage and run store.getState() in the export const persistor = persistStore(...) function, state should return empty and cleared
• If you clear persisted storage and load a specific player and campaign id in the export const persistor = persistStore(...) function, state should be cleared and that player and campaign loaded. NOTE: sometimes your phone will be taken to the sign up page, and then jump to the welcome/campaign summary pages. This is because the program gets confused about having its persisted state cleared, thinking it should start with initial state, but then getting a campaign and player loaded.

4. A Note About Middlewares

The picture below shows where the store is created and how middlewares like Redux-Sagas are applied.

• Red Box: this highlights where a React-Native-Debugger (RND) middleware is created to track Redux
• Blue Arrow: this points to where the RND and Sagas middlewares are combined and put into the store

To learn more about the code in the red box, go to the Redux DevTools Extension Github.

To learn more about the awesome React-Native-Debugger go to the walkertreker wiki section on debugging, and check out the RND Github