Question

晚上好，并为很多代码做好准备。

我正在学习如何将Redux与React一起使用，以便在组件之间共享状态，并且我一直在尝试根据您单击的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>

所以基本上当你点击它们时组件会改变颜色，而且在React中真的很难做到我已经找到了。我根据我正在观看的教程正确连接了我的调度员，并且我仍然没有成功改变状态。也许我不完全理解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>
    )

  }
}

Nav.js（在Layout中列出）

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商店：

{
  type: "CLICK",
}

该操作无法识别单击了哪个导航项，只是说发生了单击。同样，您的减速器将来自

{
  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
}

您只需在about和projects旁边添加有效标记，而不是在其中。查看redux's todomvc示例，了解如何最有效地识别点击了哪个项目并使商店更新得当。一个解决方案是

//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
}

Redux调度员无法正常工作

1 个答案: