Implementing redux in React Native app not working

395
March 19, 2017, at 09:36 AM

I'm trying to get a small app to run in react native with redux. It was running without redux but since I have tried to add redux to it, it is no longer running (it displays a blank white screen and says). I'm trying to stare clear of classes and do it in a functional way:

Lodaing 100% (572/572)

I think I'm linking up the redux store to my main app component incorrectly.

Here is the main app component where I try to link it to redux:

index.ios.js:

import { Map } from 'immutable'
import { AppRegistry } from 'react-native'
import { createStore, Provider } from 'redux'
import { Volcalc } from './app/components/volcalc/Volcalc'
import { width } from './app/components/width/width.reducer'
import React from 'react'
const initialState = Map({ 'width1': 20, 'width2': 0, 'width3': 0 })
const store = createStore(width, initialState)
const updateWidth = (text, number) => {
  store.dispatch(this.state, {
    type: 'UPDATE_WIDTH',
    payload: {
      number: number,
      value: text
    }
  })
}
export const App = () => {
  console.log(store.getState)
  return (
    <Provider store={store}>
      <Volcalc
        updateWidth={updateWidth}
        state={store.getState()}
      />
    </Provider>
  )
}
AppRegistry.registerComponent('volcalc_m', () => App)

Here is the Volcalc component which is inside the app component:

Volcalc.js:

import { View } from 'react-native'
import React from 'react'
import { Width } from '../width/Width'
export const Volcalc = (props) => {
  return (
    <View style={styles.container}>
      <Width updateWidth={props.updateWidth} />
    </View>
  )
}
const $mainColor = '#00d1b2'
const styles = {
  container: {
    flex: 0.5,
    padding: 20,
    backgroundColor: $mainColor
  }
}

And the width component which is inside the Volcalc component:

width.js:

import { TextInput, View } from 'react-native'
import React from 'react'
export const Width = (props) => {
  return (
    <View>
      <TextInput
        style={styles.input}
        placeholder="Width1"
        autoCapitalize="none"
        keyboardType="numeric"
        onChangeText={text => props.updateWidth(text, 1)}
      />
      <TextInput
        style={styles.input}
        placeholder="Width2"
        autoCapitalize="none"
        keyboardType="numeric"
        onChangeText={text => props.updateWidth(text, 2)}
      />
      <TextInput
        style={styles.input}
        placeholder="Width3"
        autoCapitalize="none"
        keyboardType="numeric"
        onChangeText={text => props.updateWidth(text, 3)}
      />
    </View>
  )
}
const styles = {
  input: {
    margin: 15,
    height: 70,
    width: 70,
    borderColor: 'grey',
    borderWidth: 1
  },
}

This is the only reducer. It is called in index.ios.js:

width.reducer.js:

// @flow
import { Map } from 'immutable'
let initialMap = Map({ 'width1': 20, 'width2': 0, 'width3': 0 })
export const width = (state: Map<*, *> = initialMap, action: Object) => {
  switch(action.type) {
    case 'UPDATE_WIDTH': {
      let newState = state
        .set('width' + action.payload.number, action.payload.value)
      return newState
    }
    default:
      return state
  }
}

What am I doing wrong?

Rent Charter Buses Company
READ ALSO
passport-facebook, serializeUser flow

passport-facebook, serializeUser flow

Ive been studying express, passportjs and passport-facebookThe thing is, I dont know the flow of it and in the documentation I found nothing (IMO the documentation is poor)

306
Not able to toggle between different div section in html

Not able to toggle between different div section in html

Trying to toggle between different div upon clicking the button

292
Radio buttons inside the slides of a carousel aren&#39;t working

Radio buttons inside the slides of a carousel aren't working

I am using owl-carousel-2 to set up a slide show which has a quiz in it

340
paradigm / pattern to solve dynamical function calling

paradigm / pattern to solve dynamical function calling

I've been puzzling the last few days on trying to solve a problem in Javascript (typescript), and I'm unable to come to a solution that I feel comfortable withSo here is my scenario:

320