重复使用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. 如果所采取的行动，和减速器看起来正确，检查你的阵营组成：

   • 是否组件接收正确的道具？如果是的话，道具是如何渲染的。如果不是，这是商店如何连接到组件的问题。

希望这个调试教程对你很有用。如果您有任何后续问题，请不要犹豫，询问:)