reactjs - 一旦 reducer 更新新状态，有什么方法可以控制台记录整个状态树？

Question

我是原生 react 新手。我想知道执行 reducer 函数后当前的状态树。我想知道状态树最新值。

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

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

我的操作是当我初始化商店时，我调度一个操作来检查用户本地存储中是否有访问 token 。如果存在，则更新状态..但不知何故，状态似乎没有更新。

编辑:

这是我的 reducer

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()))

完成后，在控制台浏览器中您将看到如下内容: