kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-09 22:51:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improvement in redux-integration documentation. (#2964)

Browse Source 
* Added a guide to intermediate concepts.

* Documentation improvement for redux integration.

* redux-integration feedback incorporated

* incorporated feedback

* heading style changes
This commit is contained in:
Shubhnik Singh
2017-11-16 14:21:56 -08:00
parent 28e330a89a
commit bd9ed90fb2
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react-navigation/docs/guides/Redux-Integration.md
View File

@@ -1,7 +1,13 @@
# Redux Integration
To handle your app's navigation state in redux, you can pass your own `navigation` prop to a navigator. Your navigation prop must provide the current state, as well as access to a dispatcher to handle navigation options.
### Overview For Redux Integration
1. To handle your app's navigation state in redux, you can pass your own `navigation` prop to a navigator.
2. Once you pass your own navigation prop to the navigator, the default [`navigation`](https://reactnavigation.org/docs/navigators/navigation-prop) prop gets destroyed. You will most probably pass the `navigation` prop's properties that you want to access. Normally [`state`](https://reactnavigation.org/docs/navigators/navigation-prop#state-The-screen's-current-stateroute) and [`dispatch`](https://reactnavigation.org/docs/navigators/navigation-prop#dispatch-Send-an-action-to-the-router) properties are passed to the navigator. You will learn how to pass those properties further in this guide. Since you have destroyed the default props, if you try to invoke something you have not explicitly passed down, it won't work. So, if you didn't pass `dispatch` to the navigator and only passes `state` than you can't access `dispatch` further in your Components.
3. The `state` will be fed from the reducer assigned to handle navigation state and the `dispatch` will be redux's default `dispatch`. Thus you will be able to dispatch normal redux actions using `this.props.navigation.dispatch(ACTION)`, reducer will update the navigation state on the basis of dispatched action, the new navigation state will then be passed to the navigator.
### Details Regarding Redux Integration
With redux, your app's state is defined by a reducer. Each navigation router effectively has a reducer, called `getStateForAction`. The following is a minimal example of how you might use navigators within a redux application:
```es6