Javascript 在React本机应用程序中实现redux不工作

我正在尝试让一个小应用程序在react native with redux中运行。它在没有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)

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

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

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

---

我做错了什么？

您的代码有两个问题

第一个问题是从“redux”导入{createStore，Provider}。redux库中没有提供程序。它只在

react redux

库中

这是react redux库的官方声明：

提供商商店

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

因此，您根本不需要将Volcalc组件包装到提供程序中，因为您不需要连接它下面的任何组件。对吗？（尽管我还是建议您使用connect&Provider）

第二个问题是您以错误的方式调用dispatch。使用

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)

从“不可变”导入{Map}
从“react native”导入{AppRegistry}
从“redux”导入{createStore，Provider}
从“./app/components/Volcalc/Volcalc”导入{Volcalc}
从“./app/components/width/width.reducer”导入{width}
从“React”导入React
常量initialState=Map（{'width1'：20，'width2'：0，'width3'：0}）
常量存储=创建存储（宽度，初始状态）
const updateWidth=（文本，数字）=>{
仓库调度({
键入：“更新宽度”，
有效载荷：{
号码:号码,，
值：文本
}
})
}
导出常量应用=（）=>{
console.log（store.getState）
返回(
)
}
AppRegistry.registerComponent（'volcalc_m'，（）=>App）

希望这有帮助。：-）