Question

我正在尝试将Redux添加到我的React Native应用程序中。有一个Decider应用可以控制是否显示<Intro />或<Content />。

我以前从未遇到过连接redux的任何问题，并尝试过不同的变体，所以我必须在这里做错事。仅供参考我拥有<Decider />组件的唯一原因是<App />是根组件，根据我的理解，您不能拥有Provider和connect()零件。

Props作为一个空对象而来。我究竟做错了什么？

App.js

import Intro from './pages/Intro';
import Content from './pages/Content';
const store = createStore(rootReducer)

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Decider /> 
      </Provider>
    )
  }
}

class Decider extends Component {
  render() {
    return this.props.showIntro ? <Intro /> : <Content />
  }
}

const mapStateToProps = state => {
  return {
    showIntro: state.showIntro
  }
}

connect(mapStateToProps)(Decider)

./减速器/ index.js

[...auth reducer...]

const viewControl = (state = true, action) => {
  switch (action.type) {
    case ON_INTRO_COMPLETION:
      return action.payload
    default:
      return state;
  }
};

export default rootReducer = combineReducers({ auth, viewControl });

./动作/ index.js

export const onIntroCompletion = bool => {
    return {
        type: 'ON_INTRO_COMPLETION',
        payload: false
    }
}

Answer 1

您的操作返回：payload: true，reducer将其作为整个州对象（true或false）提供。

但是，当您connect()组件时，您指定尝试从state.showIntro提取。

在你的减速机中，试试这个：

case ON_INTRO_COMPLETION:
  return {showIntro: action.payload};

Answer 2

来自redux docs

combineReducers获取一个充满切片缩减器功能的对象创建一个函数，用于输出相应的状态对象相同的钥匙。

由于状态是不可变的，新状态是使用您在duration_minutes中指定的键构造的，所以如果你的减速机不符合你的州的架构，你将失去属性。

你可能想尝试这样的事情：

combineReducers

mapStateToProps将props作为空对象传递

2 个答案: