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

Question

我正在尝试让一个小型应用程序在带有 redux 的本机反应中运行。它在没有 redux 的情况下运行，但由于我尝试向其添加 redux，它不再运行（它显示一个空白屏幕并显示）。我试图避开类并以一种功能性的方式来做：

加载 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 组件内部的宽度组件：

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

这是唯一的减速器。在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 个问题。

第一个问题是你做import { createStore, Provider } from 'redux'。 redux 库中没有 Provider 这样的东西。它仅在 react-redux 库中。

这是来自 react-redux 库的官方声明：

供应商商店

使 Redux 存储可用于下面组件层次结构中的 connect() 调用。通常，如果不将根组件包装在

中，则无法使用 connect()

因此，您根本不需要使用 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)

希望这会有所帮助。 :-)