在 React Native 组件中获取 Redux 存储数据答案

【问题标题】：Get Redux store data in React Native component在 React Native 组件中获取 Redux 存储数据
【发布时间】：2019-11-12 18:19:28
【问题描述】：

我开始使用 Redux 和 React Native，我在尝试获取组件中存储的数据时遇到了很多困难，这有什么特别之处，只是一个按钮来改变商店，另一个按钮来打印它，因为我还是个新生儿在这

// TestComponent.js

<Button onPress={ () => { this.props.todoAdd("cafee") } }>
    <Text>Covfefe</Text>
</Button>

<Button onPress={ () => { console.log(this.state) } }>
    <Text>Todo alc</Text>
</Button>

const mapStateToProps = (state, props) => {
  return {
    todos: state,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    todoAdd: (name) => dispatch({type: 'TODO_ADD', todo: { id: '0', name, completed: false }}),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TestComponent)

添加按钮有效，我在 App.js 中注册了一个订阅，因此我可以看到商店中的每一个更新，我很高兴至少有一件事情有效，但我很困惑，我想获取存储的数据但我不能这行得通！

我读到 mapStateToProps 实际上监听变化和触发器，用你写的组件需要的数据更新组件的 props，我写了 props.todos = state 所以整个状态应该在 this.props.todos 中，不是吗？我不知道，但是当我打印组件道具时，我得到一个空对象。

我的商店还有其他配置文件：

// store/index.js

import {createStore} from 'redux';
import Reducers from './reducers'

export default configureStore = () => {
    let store = createStore(Reducers, [])
    return store
}

// store/reducers.js

export default function reducer(state, action) {
    switch(action.type) {
      case 'TODO_ADD' : {
        return applyAddTodo(state, action);
      }
      case 'TODO_TOGGLE' : {
        return applyToggleTodo(state, action);
      }
      default : return state;
    }
  }
  function applyAddTodo(state, action) {
    return state.concat(action.todo);
  }
  function applyToggleTodo(state, action) {
    return state.map(todo =>
      todo.id === action.todo.id
        ? Object.assign({}, todo, { completed: !todo.completed })
        : todo
    );
}

// App.js

import {Provider} from 'react-redux';
import configureStore from './store/index'

let store = configureStore()
const unsubscribe = store.subscribe(() => {
  console.log('store update, current state:');
  console.log(store.getState());
});

const MainNavigator = createStackNavigator({
  Home: {screen: TestComponent},
});

const Root = createAppContainer(MainNavigator);

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

我只是想知道如何获取数据以打印它，我刚开始学习 redux，因此非常欢迎任何提示，无论如何感谢您阅读我。

【问题讨论】：

标签： javascript react-native redux react-redux

【解决方案1】：

试试console.log(this.props.todos) 由于您将整个 redux 存储状态映射到 todos 对象，您应该在 this.props.todos 找到它

【讨论】：

我修改了我的组件状态，所以它有 todos 作为一个空数组来查看是否是问题所在，添加记录时我可以看到新记录，因为我订阅了传入的更改但是当我尝试打印this.props.todos 我只得到一个空数组，mapStateToProps 并没有改变我的组件道具，但它实际上被调用了，我已经测试过了，所以我真的不知道出了什么问题：c

【解决方案2】：

好的，所以我发现我的代码有什么问题，当我尝试打印我的商店时，我正在做 console.log(this.state) 确信 mapStateToProps 修改了组件的实际状态，但它没有，它将状态传递给组件（如函数名称所示......）：c

【讨论】：