Skip to content

Commit

Permalink
Improve the Redux docs (react-navigation#1172)
Browse files Browse the repository at this point in the history
* [ReduxExample] Programmatically generate initial state

* [ReduxExample] Return original state if nextState is null

* [Docs] Add getStateForAction to redux integration example

* [Docs] Add link to ReduxExample app

* [Docs] Give each example a 'DRY' README linking to real docs

* [Docs] Clean up the Contributors guide a bit

* [Docs] Remove numbers from sections in Contributors guide

They don't seem very meaningful, and don't need to be done in order
  • Loading branch information
cooperka authored and grabbou committed Apr 25, 2017
1 parent c39dd9d commit 655b46b
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 43 deletions.
22 changes: 11 additions & 11 deletions docs/guides/Contributors.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,20 @@ React navigation was initially developed on macOS 10.12, with node 7+, and react

## Development

### 0. Fork the repo
### Fork the repo

- Fork [`react-navigation`](https://github.com/react-community/react-navigation) on GitHub

- Run these commands in the terminal:
- Run these commands in the terminal to download locally and install it:

```
git clone https://github.com/<USERNAME>/react-navigation.git`
git clone https://github.com/<USERNAME>/react-navigation.git
cd react-navigation
git remote add upstream https://github.com/react-community/react-navigation.git
npm install
```


### 1. Run the native playground
### Run the example app

```
cd examples/NavigationPlayground
Expand All @@ -30,17 +29,20 @@ npm start
# In a seperate terminal tab:
npm run run-playground-android
# OR:
npm run run-playground-ios
```

### 2. Run the website
You can also simply run e.g. `react-native run-android` from within the example app directory (instead of `npm run run-playground-android` from the root `react-navigation` directory); both do the same thing.

### Run the website

For development mode and live-reloading:

```
cd website
npm install
npm run start
npm start
```

To run the website in production mode with server rendering:
Expand All @@ -49,7 +51,7 @@ To run the website in production mode with server rendering:
npm run prod
```

### 3. Run tests, run flow
### Run tests and type-checking

```
jest
Expand All @@ -60,14 +62,12 @@ Tests must pass for your changes to be accepted and merged.

Flow is not yet passing, but your code should be flow checked and we expect that your changes do not introduce any flow errors.


### 4. Developing Docs
### Developing Docs

The docs are indexed in [App.js](https://github.com/react-community/react-navigation/blob/master/website/src/App.js), where all the pages are declared alongside the titles. To test the docs, follow the above instructions for running the website. Changing existing markdown files should not require any testing.

The markdown from the `docs` folder gets generated and dumped into a json file as a part of the build step. To see updated docs appear in the website, re-run the build step by running `npm run build-docs` from the `react-navigation` root folder.


## Submitting Contributions

### New views or unique features
Expand Down
14 changes: 11 additions & 3 deletions docs/guides/Redux-Integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,13 @@ import { addNavigationHelpers } from 'react-navigation';
const AppNavigator = StackNavigator(AppRouteConfigs);
const navReducer = (state, action) => {
const newState = AppNavigator.router.getStateForAction(action, state);
return (newState ? newState : state)
const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Login'));
const navReducer = (state = initialState, action) => {
const nextState = AppNavigator.router.getStateForAction(action, state);
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
};
const appReducer = combineReducers({
Expand Down Expand Up @@ -65,6 +69,10 @@ const AppNavigator = StackNavigator({

In this case, once you `connect` `AppNavigator` to Redux as is done in `AppWithNavigationState`, `MyTabNavigator` will automatically have access to navigation state as a `navigation` prop.

## Full example

There's a working example app with redux [here](https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample) if you want to try it out yourself.

## Mocking tests

To make jest tests work with your react-navigation app, you need to change the jest preset in the `package.json`, see [here](https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization):
Expand Down
7 changes: 7 additions & 0 deletions examples/NavigationPlayground/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Navigation Playground Example

A playground for experimenting with react-navigation in a pure-JS React Native app.

## Usage

Please see the [Contributors Guide](https://github.com/react-community/react-navigation/blob/master/docs/guides/Contributors.md#development) for instructions on running these example apps.
17 changes: 0 additions & 17 deletions examples/NavigationPlayground/ReadMe.md

This file was deleted.

5 changes: 5 additions & 0 deletions examples/ReduxExample/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Redux example

## Usage

Please see the [Contributors Guide](https://github.com/react-community/react-navigation/blob/master/docs/guides/Contributors.md#development) for instructions on running these example apps.
28 changes: 16 additions & 12 deletions examples/ReduxExample/src/reducers/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,31 @@ import { NavigationActions } from 'react-navigation';
import { AppNavigator } from '../navigators/AppNavigator';

// Start with two routes: The Main screen, with the Login screen on top.
const initialNavState = {
index: 1,
routes: [
{ key: 'InitA', routeName: 'Main' },
{ key: 'InitB', routeName: 'Login' },
],
};

const initialAuthState = { isLoggedIn: false };
const firstAction = AppNavigator.router.getActionForPathAndParams('Main');
const tempNavState = AppNavigator.router.getStateForAction(firstAction);
const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
const initialNavState = AppNavigator.router.getStateForAction(secondAction, tempNavState);

function nav(state = initialNavState, action) {
let nextState;
switch (action.type) {
case 'Login':
return AppNavigator.router.getStateForAction(NavigationActions.back(), state);
nextState = AppNavigator.router.getStateForAction(NavigationActions.back(), state);
break;
case 'Logout':
return AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
nextState = AppNavigator.router.getStateForAction(NavigationActions.navigate({ routeName: 'Login' }), state);
break;
default:
return AppNavigator.router.getStateForAction(action, state);
nextState = AppNavigator.router.getStateForAction(action, state);
break;
}

// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
}

const initialAuthState = { isLoggedIn: false };

function auth(state = initialAuthState, action) {
switch (action.type) {
case 'Login':
Expand Down

0 comments on commit 655b46b

Please sign in to comment.