javascript - 在 React Native 应用程序中实现 redux 不起作用

Question

我正在尝试让一个小应用程序通过 redux 在 native react 中运行。它在没有 redux 的情况下运行，但由于我尝试向其中添加 redux，它不再运行(它显示空白屏幕并显示)。我试图避开类并以功能性的方式完成它:

Lodaing 100% (572/572)

我认为我错误地将 redux 存储链接到我的主应用程序组件。

这是主要的应用程序组件，我尝试将其链接到 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)

这是应用程序组件内的 Volcalc 组件:

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
  }
}

Volcalc 组件内的宽度组件:

宽度.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
  },
}

这是唯一的 reducer 。它在 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
  }
}

我做错了什么？

Answer 1

您的代码有 2 个问题。

第一个问题是您从 'redux' 导入 { createStore, Provider }。 redux 库中没有 Provider 之类的东西。它仅存在于 react-redux 库中。

这是react-redux库的官方声明:

提供商商店

Makes the Redux store available to the connect() calls in the component hierarchy below. Normally, you can’t use connect() without wrapping the root component in

因此，您根本不需要使用 Provider 包装 Volcalc 组件，因为您不连接其下面的任何组件。正确的？ (尽管我还是建议您使用 connect & Provider)。

第二个问题是您以错误的方式调用调度。您想通过 store.dispatch(this.state, ...) 表达什么？ 调度函数只有一个参数 - 即操作本身。

将您的index.ios.js替换为以下代码，然后就可以开始了。

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({
    type: 'UPDATE_WIDTH',
    payload: {
      number: number,
      value: text
    }
  })
}

export const App = () => {
  console.log(store.getState)
  return (
    <Volcalc
      updateWidth={updateWidth}
      state={store.getState()}
    />
  )
}

AppRegistry.registerComponent('volcalc_m', () => App)

希望这有帮助。 :-)