GitXplorerGitXplorer
M

react-navigation-redux-example

public
4 stars
0 forks
17 issues

Commits

List of commits on branch master.
Verified
dcf2523052bff482a185dbee9dbf72861ed0042c

Merge pull request #8 from MateusAndrade/dependabot/npm_and_yarn/lodash-4.17.19

MMateusAndrade committed 5 years ago
Verified
8a1a35d44207bf4db6db24967c3d1d482819afed

Bump lodash from 4.17.11 to 4.17.19

ddependabot[bot] committed 5 years ago
Verified
9dfa770195450b80a67b01f8a62cc1b201741e38

Merge pull request #4 from MateusAndrade/test-tag-merge

MMateusAndrade committed 5 years ago
Unverified
e13e79f39187cacfe41c78f001229babed3734e3

testing tag

MMateusAndrade committed 5 years ago
Verified
db732f690d25a493cdc0fd1bfaeb807156882218

Update README.MD

MMateusAndrade committed 6 years ago
Unverified
990e3cbaf18979b3e3409b482acda2d26e6549b1

adding gif to readme

MMateusAndrade committed 6 years ago

README

The README file for this repository.

React-Native - Navigation with Redux

This is a simple react-native project consisting of a application with two tabs, each on with your screens, containers, etc.

Made with:

React Navigation - React Navigation v3.0.9 React Redux - React-Redux: v6.0.0 Redux - Redux v4.0.1.

Motivation

As of version 2.0, the integration with Redux in its state is no longer officially supported by react-navigation.

From that point on, the state of your application's navigation and the state (redux for example) should be treated in separate ways. Instead of using something like the following:

const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers({
  nav: navReducer,
  ...
});

// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);

const App = reduxifyNavigator(AppNavigator, "root");
const mapStateToProps = (state) => ({
  state: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(App);

const store = createStore(
  appReducer,
  applyMiddleware(middleware),
);
  • CODE

I hope with this boilerplate it is simpler to understand how to manage your navigation and its state separately. =)

Getting Started

Just clone this repo, and run a:

npm i && npm start

Or even simpler

yarn && yarn start

I recommend using a debugger like: React-Native Debugger.

Deployment

After starting your development server just run a react-native run-android in a new shell tab.

Authors

TODO

  • Add action to edit user.
  • Write some JS Docs on redux and navigation actions.

Demo

Test