Reduxディスパッチャが動作しない

Question

Good Eveningと多くのコードを用意してください。

私はコンポーネント間で状態を共有するためにReactでRexを使用する方法を学習していますが、どのdivをクリックするかに基づいて色を変更するナビゲーションバーを作成しようとしています。私はReduxのは、私は次の操作を実行できるようにしたいハイレベルでは...

<Navigation> 
    <NavEndpt /> <-- click an endpoint and you set this.props.active to true 
    <NavEndpt /> <-- resets the rest and set this.props.active to false 
</Navigation> 

だから、基本的にあなたがそれらをクリックすると、コンポーネントは、色を変更し、それがで行うには本当に難しいですが、私が知るようになってきている反応します。ディスパッチャーは私が見ているチュートリアルに従って正しく配線されていますが、私はまだ状態を変更することに成功していません。たぶん私はReduxを完全に理解していないかもしれませんが、私はいくつかの助けに感謝します。私は自分の問題を理解するのに最適な順番でスニペットを提供し、私が間違っていた場所を見分けることができます。

client.js index.htmlには何も付いていません。

import React from "react"; 
import ReactDOM from "react-dom"; 
import { Provider } from "react-redux"; 

import Layout from "./components/Layout" 
import store from "./store" 

const app = document.getElementById("app"); 

ReactDOM.render(<Provider store={store}><Layout /></Provider>, app); 

store.js：

ここ

import { applyMiddleware, createStore } from "redux"; 

import reducer from "./reducers/mainReducer" 

export default createStore(reducer) 

初期状態に設定navReducer.js次のとおりです。ここで

export default function reducer(state = { 
    about: { 
    id: "about", 
    title: "Who I am", 
    active: false 
    }, 
    projects: { 
    id: "projects", 
    title: "What I do", 
    active: false 
    } 

}, action) { 

    switch (action.type) { 
    case "CLICK": { 
     return {...state, active: true } 
     break 
    } 
    } 

    return state 
} 

つのアクションを持っているnavActions.jsですが...

export function activeBox(){ 
    return{ 
    type: "CLICK", 
    } 
} 

上記のスニペットを利用するコンポーネントは次のとおりです。ひとつは、コンソールや端末に何のエラーもなく、私の問題は単にファイルへの悪いパスだと信じています。

Layout.js

import React from "react"; 

import Nav from "./views/Nav" 

import { connect } from "react-redux"; 

@connect((store) => { 
    return{ 

     about: store.navControls.about, 
     projects: store.navControls.projects 

    }; 
}) 
export default class Layout extends React.Component { 


    render(){ 


    return(
     <div id="wrapper"> 
     <Nav about={this.props.about} projects={this.props.projects} dispatch={this.props.dispatch} /> 
     <div id="content"></div> 
     </div> 
    ) 

    } 
} 

（Layoutで紹介）Nav.js

import React from "react"; 

import NavEndpt from "./NavEndpt" 

const Nav = React.createClass({ 


    render(){ 

    let about = this.props.about; 
    let projects = this.props.projects; 


    return(
     <div id="navigation"> 
     <NavEndpt data={about} dispatch={this.props.dispatch} /> 
     <NavEndpt data={projects} dispatch={this.props.dispatch} /> 
     </div> 
    ) 
    } 
}) 


export default Nav; 

し、最終的にNavEndpt.js

import React from "react"; 

import { activeBox } from "../../actions/navActions.js" 

const NavEndpt = React.createClass({ 
    handleClick(){ 
    let data = this.props.data; 
    console.log("clicked " + data.active) 

    this.props.dispatch(activeBox()); // this does nothing, checking out React in the chrome dev tools shows no change to about.active or projects.active 
    }, 

    styleUpdate(){ 
    let data = this.props.data; 

    if (data.active === false){ 
     return{ 
     background: "violet" 
     } 
    } else if (data.active === true){ 
     return { 
     background: "yellow" 
     } 
    } 
    }, 

    render(){ 
    let data = this.props.data; 
    return(

     <div className="navButton" onClick={this.handleClick} style={this.styleUpdate()}> 
     <span>{data.title}</span> 
     </div> 

    ) 
    } 
}) 

export default NavEndpt; 

事前のスタックオーバーフローのコミュニティのおかげで、私はあなたの洞察力をお待ちしておりますので、私はこれが終日働くように努力してきました。

歓声

Answer 1

this.props.dispatch(activeBox());があなたのReduxのストアに次のアクションをディスパッチ：アクションはNAVアイテムがクリックされたかを特定しない

{ 
    type: "CLICK", 
} 

、それだけでクリックが発生したことを述べています。同様に、あなたの減速は、あなただけではない彼らに、aboutとprojectsに隣接するアクティブフラグを追加している

{ 
    about: { 
    id: "about", 
    title: "Who I am", 
    active: false 
    }, 
    projects: { 
    id: "projects", 
    title: "What I do", 
    active: false 
    } 
} 

から

{ 
    about: { 
    id: "about", 
    title: "Who I am", 
    active: false 
    }, 
    projects: { 
    id: "projects", 
    title: "What I do", 
    active: false 
    }, 
    active: true 
} 

に行きます。redux's todomvcの例を参照して、どのアイテムがクリックされたかを特定し、店舗を適切に更新する方法を確認してください。 1つの解決策は

//navActions.js 
export function activeBox(nav){ 
    return{ 
    type: "CLICK", 
    nav: nav 
    } 
} 

// navReducer.js 
export default function reducer(state = { 
    about: { 
    id: "about", 
    title: "Who I am", 
    active: false 
    }, 
    projects: { 
    id: "projects", 
    title: "What I do", 
    active: false 
    } 
}, action) { 

switch (action.type) { 
    case "CLICK": { 
    // Copy state over to prevent altering previous state 
    let newState = { 
     about: ...state.about, 
     projects: ...state.projects 
    } 
    // Set all nav items to inactive, when you have more navItems you'll want to loop 
    newState.about.active = false 
    newState.projects.active = false 

    // if action.nav is a proper nav item, set it to active 
    if (newState[action.nav]) { 
     newState[action.nav].active = true 
    } 
    return newState 
    break 
    } 
} 

return state 
}