我們在React 的開發過程中，通常會引用Redux，作為一個事件，資料和檢視的一個解耦框架，從而更加有利於程式碼的工程實踐和維護。使用Reducer的時候，我們通過mapStateToProps方法或者mapDispatchToProps方法，把reducer中維護的state對映到React元件的props上去。但是有的時候，有用reducer裡面定義的結構比較複雜，裡面有好幾層巢狀，我在使用被對映過的props的時候，往往不知道，其到底把state中的那些物件和屬性對映過來了，那麼有沒有什麼解決的方法呢？

筆者經過實踐，發現，其實又一個很好的方法，可以幫助我們快速的判斷和定位，那就是在主的redux的store裡面把state裡面的物件寫入到log裡面去，程式碼如下：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers/index-reducers.js';



const logger = (store) => (next) => (action) => {
  console.group(action.type);
  console.info('dispatching', action);
  if(typeof action !== "function"
 
){
    console.log('dispatching:', action);
  }
  let result = next(action);
  console.log('next state', store.getState());
  console.groupEnd(action.type);
  return result;
}

const IndexStore = createStore(
  reducers,
  applyMiddleware(logger, thunk)
);

export default IndexStore;

就是其中的下面的這行程式碼大大的幫助了我。

console.log('next state', store.getState());

特意個大家分享一下，希望能夠幫助到大家。