Question

使用反应本机来减少总量。

当我在reducer的情况下（或在我的操作中）中调试console.log（'test'）时，我会在调用操作时在控制台中成功地看到它们。但是我没有在控制台中看到redux“NEXT STATE”/“PREV STATE”的东西。

我有什么基本的遗失吗？

在下面的代码中 - 我不是想让任何真正的功能发生，我只是尝试设置redux并在控制台中查看状态更改（所以我知道我在正确的路径上）。

容器

import React, { PropTypes } from 'react-native';
import Header from './Header';
import { connect } from 'react-redux';
import { leave } from './actions';
import { join } from './actions';

const mapStateToProps = (state) => {
  return {
    in: state.in
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    join: (id) => {
      dispatch(join(id))
    },
    leave: (id) => {
      dispatch(leave(id))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);

减速器

export default function Header(state = { in: false }, action = {}) {
  switch (action.type) {
    case 'LEAVE':
      return {
        ...state,
        in: false
      }
    case 'JOIN':
      console.log(state);
      console.log(action);
      console.log('join');
      return {
        ...state,
        in: true
      }
    default:
      return state;
  }
}

操作

export const join = (id) => {
  return {
    type: 'JOIN',
    payload: {
      in: true
    }
  }
}

export const leave = (id) => {
  return {
    type: 'LEAVE',
    payload: {
      in: false
    }
  }
}

Answer 1

作为我的总体bozo，我没有意识到https://github.com/fcomb/redux-logger需要单独安装

Answer 2

正如您已经确定的那样，您需要安装redux-logger中间件。 https://github.com/evgenyrodionov/redux-logger

来自他们的文档：

import { applyMiddleware, createStore } from 'redux';

// Logger with default options
import logger from 'redux-logger'
const store = createStore(
  reducer,
  applyMiddleware(logger)
)

我只在开发环境中执行此操作

const middlewares = [];

if (process.env.NODE_ENV === 'dev') {
  middlewares.push(logger);
}
const store = createStore(
  reducer,
  applyMiddleware(...middlewares)
)

使用Redux React Native - 状态更改未显示在控制台

2 个答案: