Question

我是Redux的新手，所以我不确定自己做错了什么。我正在使用在第一页上工作的计数器

第一页：

'use strict';

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import Counter from '../components/counter';
import * as counterActions from '../actions/counterActions';
import { connect } from 'react-redux';
import { Router, Scene, Route, ActionConst } from 'react-native-router-flux';

import Home from './Home';


class Routing extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount(){
    const { state, actions } = this.props;
    console.log(state.count); //This returns 0 just like it's supposed to
  }

  render() {
    return (
      <Router>
        <Scene hideNavBar="true" key="root">
          <Scene counter={state.count} key="home" component={Home} initial={true} animation="false" duration='0' />
        </Scene>
      </Router>
    )
  }
}

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

主页：

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import * as counterActions from '../actions/counterActions';
import {bindActionCreators} from 'redux';



export default class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }


  render() {
    const { state, actions } = this.props;
    return (
        <Text>
          {state.counter}
        </Text>
    )
  }
}


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

主页上的连接会向我显示错误Failed to execute 'importScripts' on 'WorkerGlobalScope'

我认为这可能与React Native Router Flux有关，因为我使用了场景，但只有在我尝试将商店连接到主页时才会发生。

Answer 1

您的代码的几个指针。

export default组件目前有两个Home个。每个文件只允许一次默认导出。您需要公开connect()的结果，因此请更改

export default class Home extends Component {

到

class Home extends Component {。

由于const是块范围，因此它只存在于当前块中。在state actions中定义Routing和componentDidMount表示它们在render内无法使用。只需在Routing组件的render方法中移动这些定义：

render() {
  const { state, actions } = this.props;

  return (
    <Router>
      <Scene hideNavBar="true" key="root">
        <Scene counter={state.count} key="home" component={Home} initial={true} animation="false" duration='0' />
      </Scene>
    </Router>
  )
}

无法将商店连接到其他页面

1 个答案: