重複使用Reducer Logic不使用Redux和React切換對象'

Question

我正在對兩個不同的事件重複使用相同的reducer邏輯。這個想法是根據你點擊哪個文本來切換一個類。每個事件都會觸發，但我的對象不會切換。有什麼想法嗎？

應用：

import React from "react" 
import { bindActionCreators } from 'redux' 
import { connect } from "react-redux" 
import * as toggleactionCreators from '../actions/toggleActions'; 

function mapStateToProps(state) { 
    return { 
    hiddenA: state.toggleA.hidden, 
    hiddenB: state.toggleB.hidden 
    } 
} 

function mapDispachToProps(dispatch) { 
    return bindActionCreators({...toggleactionCreators}, dispatch) 
} 

class Main extends React.Component { 

    toggleDiv() { 
    this.props.toggleDiv(); 
    console.log(this.props) 
    } 

    render() { 
    const { hiddenA, hiddenB } = this.props; 
    return (
     <div> 
     <div> 
     <h3 onClick={this.toggleDiv.bind(this)} className={ hiddenA ? null : "toggled"} >Good Day!</h3> 
     <h1 onClick={this.toggleDiv.bind(this)} className={ hiddenB ? null : "toggled"} >Hello There!</h1> 
     </div> 
    </div> 
    )  
    } 
} 

export default connect(mapStateToProps, mapDispachToProps)(Main); 

指數減速機：

import { combineReducers } from "redux" 
import toggle from "./toggleReducer" 

function createNamedWrapperReducer(reducerFunction, reducerName) { 
    return (state, action) => { 
     const {name} = action; 
     const isInitializationCall = state === undefined; 
     if(name !== reducerName && !isInitializationCall) return state; 
     return reducerFunction(state, action);  
    } 
} 
const thereducer = combineReducers({ 
    toggleA : createNamedWrapperReducer(toggle, 'A'), 
    toggleB : createNamedWrapperReducer(toggle, 'B'), 
}); 

export default thereducer; 

toggleReducer：

const toggle = (state = { hidden: true}, action) => { 
    switch(action.type) { 
    case 'TOGGLE_DIV': 
     return Object.assign({}, ...state, {hidden: !state.hidden}); 
    default: 
     return state; 
    } 
}; 
export default toggle; 

按壓式：

export const toggleDiv =() => { 
    return { 
    type: 'TOGGLE_DIV', 
    } 
} 

Answer 1

這是我將如何調試。

1. 爲您的瀏覽器下載Redux DevTools。這是鉻的網址：https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

2. 下載React devtools爲你瀏覽。這是鍍鉻的網址：在終極版Devtools https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

3. 看：

   • 是動作從你的行動的創建者發出
   • 是否正確減速更新狀態？

4. 如果所採取的行動，和減速器看起來正確，檢查你的陣營組成：

   • 是否組件接收正確的道具？如果是的話，道具是如何渲染的。如果不是，這是商店如何連接到組件的問題。

希望這個調試教程對你很有用。如果您有任何後續問題，請不要猶豫，詢問:)