Question

我是新来的本地人。一旦执行了reducer函数，我想知道当前的状态树。我想知道状态树的最新值。

我在哑组件中设置逻辑，如果loggedIn状态为true，则渲染第2页，如果为false，则渲染第1页。

愚蠢的组件是不知道更新，还是这不是安排流程的正确方法？

我的行动是当我启动商店时，我发出一个动作来检查用户本地存储中是否有访问令牌。如果它存在，更新状态.. 但不知怎的，似乎州没有更新。

编辑：

这是我的减速机

const initialState = {
    token: null,
    username: null,
    loggedIn: false
}

export const reducer = (state = initialState, action) => {

    switch (action.type) {
        // Reducer does not handle API type of actions
        case types.STORE_TOKEN:
            AsyncStorage.setItem(localStorage.ACCESS_TOKEN, JSON.stringify(action.payload.token))
            return {
                token: action.payload.token,
                username : action.payload.username,
                loggedIn: true
            }
        case types.GET_TOKEN:
            AsyncStorage.getItem(localStorage.ACCESS_TOKEN).then((storage) =>{
                if(!storage){ return state }
                return {
                    token: storage,
                    loggedIn: true
                }
            })
        default:
            return state
    }
}

Answer 1

我建议你添加一个用于记录的中间件。 Here就是一个例子。如果您使用redux，则可以通过以下方式执行此操作：

1. Install [redux-logger](https://github.com/gaearon/redux-logger) package:
(npm i --save redux-logger or yarn add redux-logger)

2. Add to file where you create store following imports:

import { createLogger } from 'redux-logger'
import { createStore, applyMiddleware } from 'redux'

3. Create your store like this:

const store = createStore(reducer, applyMiddleware(createLogger()))

当你完成它时，在控制台浏览器中你会看到如下内容：

Answer 2

您可以在createStore函数中使用中间件，如下面的代码所示。它控制所有动作和当前状态和下一个状态。它使用起来非常简单，乐于助人。

<强> logger.js

import _ from 'lodash'

const DO_NOT_LOG = [
  'EFFECT_TRIGGERED', 'EFFECT_RESOLVED', 'EFFECT_REJECTED',
]

export default store => next => action => {
  if ((!_.includes(DO_NOT_LOG, action.type))) {
    console.info('Dispatching: ', action)
  }

  let result = next(action)

  if ((!_.includes(DO_NOT_LOG, action.type))) {
    console.log('Next State: ', store.getState())
  }

  return result
}

createStore功能：

import logger from './middleware/logger'
...
const middleware = [logger]
  const store = createStore(
    reducer,
    initialState,
    compose(
      applyMiddleware(...middleware),
      autoRehydrate(),
    ),
  )

一旦reducer更新新状态，有没有办法控制日志整个状态树？

2 个答案: