alinz / example-react-native-redux Goto Github PK

View Code? Open in Web Editor NEW

1.2K 1.2K 275.0 291 KB

react native redux counter example

JavaScript 47.97% Objective-C 30.99% Java 9.23% Python 11.81%

examples react-native redux simple state-management

example-react-native-redux's Introduction

Counter example

Simple example to get your started with React-Native and Redux

Counters example

A little bit more complex, but it has a lot of good stuff in it.

example-react-native-redux's People

Contributors

Stargazers

Watchers

Forkers

revskill10 arthurpark ryanlntn madole jorda0mega namhv wpcarro jolyonruss ghondar jsongo carloscuatin nickcain dghijben wookiem rebeccaryang apoeco gdsellerpd piekal anttiai juanrebolledog abuisman wtran50312 cornedor mofelee rnagella gunsnakee ncherro zhouhesheng mbxust0901 niklaslagerberg hotsen sammosampson xvalentino elijen kwltrs wumingyu12 xp13910818313 lambert-s alexter42 httpnick jofomah icemilk0122 fengjiankang karstenbuckstegge ecstasy2 mgreschke recwert abdellatoronto phil-a tribemedia mijkel firstheatweave danseethaler kenzik dvp236 vgoklani dyancl itinance andybbtt11 yarivreznik jpokrzyk ljunb justingosan zonybir netspencer edouardb j-gonzalez cheruvian noproblemo jmeyers44 dunglp jeroennelen vuzdylan msteward yufi113 sveta-k13 czengg tantam eirwin activelogic jo-wtf upgle wsp-react-native kowall116 forrest23 tiger8888 bheby3 maolion gabergg vetm73 debugeagle jiangong rukai0712 smilexlong cjcodes desiter zbage eseom shirone powercen

example-react-native-redux's Issues

"RCTBundleURLProvider.h"

It is giving me the issue saying that "RCTBundleURLProvider.h" not found.

Help needed i know i am doing something wrong here.

Thanks

Fresh clone is erroring when run

Steps to reproduce:

clone repo
npm install
open /ios/Counter.xcodeproj in Xcode
run the app in Xcode
build is successful & Simulator opens
app errors with the following

EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.

Any idea what might be causing this?

Hi, is it possible to enable hot reloading?
I tried applying instructions from https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html to Counters example, but it doesn't work.
Debugging shows that hot module accept callback is not run.

export default (data = {}) => {
  const rootReducer = combineReducers({
    // every modules reducer should be define here
    [app.NAME]: app.reducer
  })

  const store = createStore(rootReducer, data, middleware)

  console.log('configureStore')
  if (module.hot) {
    console.log('is module hot')
    // Usually console output stops here and throws error "Cannot read property 'length' of undefined" from require.js. What's interesting - there are no errors if Chrome debugging is disabled.
    module.hot.accept(() => {
      console.log('accepted')
      // Tried both of below, none works
      // const nextRootReducer = require('./modules/index').default;
      const nextRootReducer = rootReducer;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store
}

Error from `npm start`

I am getting the following error log from npm start:

1 verbose cli [ '/usr/local/Cellar/node/5.5.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
7 info lifecycle [email protected]~start: [email protected]
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/adamelemental/dev/react-projects/example-react-native-redux/Counter/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/adamelemental/dev/SDKs/android-sdk/platform-tools
10 verbose lifecycle [email protected]~start: CWD: /Users/adamelemental/dev/react-projects/example-react-native-redux/Counter
11 silly lifecycle [email protected]~start: Args: [ '-c', 'react-native start' ]
12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `react-native start`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack     at emitTwo (events.js:100:13)
14 verbose stack     at EventEmitter.emit (events.js:185:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:100:13)
14 verbose stack     at ChildProcess.emit (events.js:185:7)
14 verbose stack     at maybeClose (internal/child_process.js:821:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/adamelemental/dev/react-projects/example-react-native-redux/Counter
17 error Darwin 15.0.0
18 error argv "/usr/local/Cellar/node/5.5.0/bin/node" "/usr/local/bin/npm" "start"
19 error node v5.5.0
20 error npm  v3.5.3
21 error code ELIFECYCLE
22 error [email protected] start: `react-native start`
22 error Exit status 1
23 error Failed at the [email protected] start script 'react-native start'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the Counter package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     react-native start
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs Counter
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls Counter
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

However running react-native start from Counter folder works fine.

How to pass more than one state?

So in /Counter/app/containers/counterApp.js you're passing just one state which is count how to pass more than one state so that let's say in /Counter/app/reducers/counter.js I would have more than one initial state that I can play with:

const initialState = {
  count: 0,
  score: 0,
  name: "",
};

Import statement broken

You have to import React and {Component} from 'react', not 'react-native' in your containers...

Build failed with error: Command /bin/sh failed with exit code 1

When I clone this project from Github and then run "npm install".
After that I open the project with XCode, and build it, here is the error:



react-native bundle --entry-file index.ios.js --platform ios --dev true --bundle-output /Users/apple/Library/Developer/Xcode/DerivedData/Counter-faxpmupnkzagayfuceclbszanytu/Build/Products/Debug-iphonesimulator/Counter.app/main.jsbundle --assets-dest /Users/apple/Library/Developer/Xcode/DerivedData/Counter-faxpmupnkzagayfuceclbszanytu/Build/Products/Debug-iphonesimulator/Counter.app

bundle: Created ReactPackager

uncaught error Error: ReferenceError: [BABEL] /Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/redux/lib/index.js: Unknown option: /Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/redux/.babelrc.stage

at Logger.error (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/babel-core/lib/transformation/file/logger.js:41:11)

at OptionManager.mergeOptions (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)

at OptionManager.addConfig (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)

at OptionManager.findConfigs (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)

at OptionManager.init (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)

at File.initOptions (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:190:75)

at new File (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:121:22)

at Pipeline.transform (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/babel-core/lib/transformation/pipeline.js:42:16)

at transform (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/packager/transformer.js:56:24)

TransformError: /Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/redux/lib/index.js: [BABEL] /Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/redux/lib/index.js: Unknown option: /Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/redux/.babelrc.stage

See logs /var/folders/p9/6nq91lt97xbd803y6wlq2m9w0000gn/T/react-packager.log

at SocketClient._handleMessage (SocketClient.js:139:23)

at BunserBuf. (SocketClient.js:53:42)

at emitOne (events.js:77:13)

at BunserBuf.emit (events.js:169:7)

at BunserBuf.process (/Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/bser/index.js:289:10)

at /Users/apple/Desktop/Github/example-react-native-redux/Counter/node_modules/react-native/node_modules/bser/index.js:244:12

at doNTCallback0 (node.js:419:9)

at process._tickCallback (node.js:348:13)

Command /bin/sh failed with exit code 1

Could you please have a look at this?
I am learning how to import Redux into my React-Native Project...

Error: Unable to resolve module while Adding a new package

Hi,

First of all thanks for such a nice source code which is up to date to get started with Redux on top of react native.Here are the steps to re-produce the issue.

Download the source code from repository
run npm install through terminal staying at Project Directory Root
Launch the app through XCode. All works fine and counter example is shown up.
Now I added another package with this command 'npm install react-native-grid-view' . again staying at Project's Root Directory
Package installed successfully. Created a new JS file and imported the package using bothy 2 options shown below :
import Gridview from 'react-native-grid-view';
and
var GridView = require ('react-native-grid-view');

and I got the below error

Unable to resolve module react-native-grid-view from /Users//Documents/example-react-native-redux-master/Counter/app/components/Catalogue-Grid-View.js: Invalid directory /Users/node_modules/react-native-grid-view

Please help me as I have to use few more 3rd party components and packages ........

One more thing. I also observed that the package structure inside node_modules is a serial one and there are lot other packages which are not generally seen inside react_native package.

support the latest RN?

hi, thanks for your smart sharing about redux usage of react-native

would you mind update dependency react-native version to the latest?

thanks for your time :)

Changes in Counter code, not reflected in app.

Hi,

I'm trying to make changes and edit the code base for the Counter app. I am able to run it successfully in Simulator (iPhone 6 iOS 9.3). However, it appears to be reading from an old build and nothing else, because any changes I make to the code even as simple as commenting out the line AppRegistry.registerComponent('Counter', () => App); in index.ios.js are not reflected in the app running on the Simulator. Refreshing, or re-running the app have no effect.

Any guidance would be helpful here, I figure I'm just missing something that should be obvious.

Don't use decorators

You can avoid the need for patching by not using decorators.
We don't use them in official Redux examples anymore, either.

Egghead Tutorial

Hello,

I'm trying to follow along with the egghead tutorial. Are 'dumb' components possible? My event handler is not re-rendering the component, but the state is changing. I tried adding a Provider with a store.. but I still couldnt get it to render. Below is my code. Any help is appreciated! I also tried creating a Container and connecting the props to the redux state tree. No dice either.

Thank you

import React,{StyleSheet, Component, View, Text, TouchableOpacity, AppRegistry} from 'react-native'
import {createStore} from 'redux'
const Button = TouchableOpacity


const reducer = (state=0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    default:
      return state;
  }
}




const Counter = ({value, onIncrement}) => (
      <View  style={styles.container}>
        <Text>{value}</Text>
        <Button onPress={onIncrement}>
          <Text>up</Text>
        </Button>
      </View>
)

const store = createStore(reducer)

const CounterApp = React.createClass({
  render(){
    return <Counter onIncrement={()=>store.dispatch({type:'INCREMENT'})} value={store.getState()} />
  }
})


AppRegistry.registerComponent('reduxCounter', ()=> CounterApp)

`dispatch is not defined`

When I run this code exactly, I get the red screen and dispatch is not defined. Any idea why?

When I run the demo,it only crash.

the dependency "react-native" is private(git+ssh),so I replace it to public type (https://)
Then I run npm install,everything is OK.Then I make the patch,just follow the steps.

Xcode Error:

I guess it's because of the react-native version.
http://badge.fury.io/js/react-native

I found latest version above.Can you help me with this😭

When I run the demo,it only crash.

the dependency "react-native" is private(git+ssh),so I replace it to public type (https://)
Then I run npm install,everything is OK.Then I make the patch,just follow the steps.

Xcode Error:

I guess it's because of the react-native version.
http://badge.fury.io/js/react-native
it's 0.16.0

I found latest version above.Can you help me with this😭

Projects not running.

After cloning this repo and executing npm i i get this error on the iOS emulator:

Transform hang at 100% on Windows

I've installed Node 5.4.1 and npm 3.5.3

When I tried to reload js, it stuck at 100% and shows the red screen complaining 'Unable to download JS Bundle'.

I've tried to print out some logs in transformer.js, there's an exception when doing babel transform, and it looks like it's caused by redux-thunk's .bablerc. Updating to 1.0.3 is working. However, I don't know why with the same setting, it works fine on a Mac. (Though it will crash when exiting the app)

transforming:  C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\node_modules\redux-thunk\lib\index.js
err= [ReferenceError: [BABEL] C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\node_modules\redux-thunk\lib\index.js: Unknown option: C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\node_modules\redux-thunk\.babelrc.stage]
transforming:  C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\app\reducers\index.js
transforming:  C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\app\reducers\counter.js
transforming:  C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\app\actions\actionTypes.js
transforming:  C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\app\containers\counterApp.js
transforming:  C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\app\components\counter.js
transforming:  C:\Users\Raymond\workspace\ReactNativeProjs\example-react-native-redux\Counter\app\actions\counterActions.js

Failed to apply plugin [id 'com.android.application']

[user:...-react-native-redux/Counter]$ react-native run-android                                                                                                                                                                                                              (master) 
(node:30926) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
(node:30926) DeprecationWarning: Using Buffer without `new` will soon stop working. Use `new Buffer()`, or preferably `Buffer.from()`, `Buffer.allocUnsafe()` or `Buffer.alloc()` instead.
JS server already running.
Running /Users/user/Library/Android/sdk/platform-tools/adb -s 7c1ccc7c reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && ./gradlew installDebug...

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/user/Git/redux/example-react-native-redux/Counter/android/app/build.gradle' line: 1

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
   > Gradle version 2.2 is required. Current version is 2.10. If using the gradle wrapper, try editing the distributionUrl in /Users/user/Git/redux/example-react-native-redux/Counter/android/gradle/wrapper/gradle-wrapper.properties to gradle-2.2-all.zip

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 2.172 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

npm install fails

example-react-native-redux-master jonas$ npm i
npm ERR! git clone --template=/Users/jonas/.npm/_git-remotes/_templates --mirror ssh://[email protected]/alinz/react-native.git /Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c: Cloning into bare repository '/Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c'...
npm ERR! git clone --template=/Users/jonas/.npm/_git-remotes/_templates --mirror ssh://[email protected]/alinz/react-native.git /Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c: Permission denied (publickey).
npm ERR! git clone --template=/Users/jonas/.npm/_git-remotes/_templates --mirror ssh://[email protected]/alinz/react-native.git /Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c: fatal: Could not read from remote repository.
npm ERR! git clone --template=/Users/jonas/.npm/_git-remotes/_templates --mirror ssh://[email protected]/alinz/react-native.git /Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c: 
npm ERR! git clone --template=/Users/jonas/.npm/_git-remotes/_templates --mirror ssh://[email protected]/alinz/react-native.git /Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c: Please make sure you have the correct access rights
npm ERR! git clone --template=/Users/jonas/.npm/_git-remotes/_templates --mirror ssh://[email protected]/alinz/react-native.git /Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c: and the repository exists.
npm ERR! Darwin 15.0.0
npm ERR! argv "/Users/jonas/.nvm/versions/node/v4.0.0/bin/node" "/Users/jonas/.nvm/versions/node/v4.0.0/bin/npm" "i"
npm ERR! node v4.0.0
npm ERR! npm  v2.14.2
npm ERR! code 128

npm ERR! Command failed: git clone --template=/Users/jonas/.npm/_git-remotes/_templates --mirror ssh://[email protected]/alinz/react-native.git /Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c
npm ERR! Cloning into bare repository '/Users/jonas/.npm/_git-remotes/ssh-git-github-com-alinz-react-native-git-6a7bef8c'...
npm ERR! Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.

I think you have to edit package.json and put
"react-native": "git://github.com/alinz/react-native.git#v0.10.1-stable-redux"
instead of "react-native": "git+ssh://[email protected]:alinz/react-native.git#v0.10.1-stable-redux",

Reducer/dispatcher extending.

How to make this with multiple states? Or should I make 1 master state object and add everything to it?
Like state.master? I am almost grasping the complete picture but missing a few lines in my head to this context. whats the most common way to grasp this idea?

export default connect(state => ({
    state: state.counter
  }),
  (dispatch) => ({
    actions: bindActionCreators(counterActions, dispatch)
  })
)(CounterApp);

Trying to make new modules for the first time with redux.

Unable to load JS bundle - Android

Hi,

I really wanted to try out this example. It's my first step towards redux. But, I get the following error all the time-

My terminal-

My Mobile-

All other react native apps are working fine.

I did the following-

Cloned this repo
npm install
react-native start
react-native run-android

Then, JS bundle reload fails at like 99% step. But, react-native run-android (app installation) is successful.

Any idea what's the reason? What am I missing?

Will be more helpful if there is some data posting and fetching in react native-redux

Hi @alinz , thanks for this awesome counter example. Its helps alot in learning React native - Redux, If you find some time make a sample app on react native - redux on Network request (ie. data fetching and posting to local server) It would be more helpful.

Thanks in Advance

Unable to load on android

Hi,

Did a git clone, cd to Counter, npm install, then react-native run-android.

I got no errors from either the install or run.

However, when the app starts, it immediately fails with the message: "RCTNetworking sendRequest got 7 arguments, expect 6".

Using node version 5.5.0, npm version 3.3.12.

Thanks!

Modules in the real app

Thanks for the great example, esp for the concept of modules!

In the real apps do you make 1 module per screen or per common group of functionality?
Like, will you make modules Intro, Login, Signup, RecoverPassword, or will it be 1 module Onboarding?

How would you structure the code for navigation? Like a module which manages all other modules?

When I run the demo,it only crash on Android phone

I can't run Counters on my Android phone , but can run it on ios Simulator.

I follow #10 to fix it ,but still can't open the Counters App.

Could you help me ?

react-native-webview-bridge

hi,alinz,I also can't deal with how to make it work at injectedJavaScript of Anroid

"Store does not have a valid reducer ..."

I'm getting the following error after a fresh checkout and build:

console.error: "Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers."

example showing thunk usage would be appreciated

Think is one of the weirder parts of an already-weird package of techs. An example is welcome showing not just how to install thunk, but how it fits into the process of making async calls and updating the store once those calls return.