Question

我开始使用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，因此非常欢迎任何提示，无论如何，感谢您的阅读。

Answer 1

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

中找到它

Answer 2

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

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

2 个答案: