Question

我是redux的新手。我输入了一个简单的代码，即分配了名称“ Mike”

但是，当我单击创建的buttonClick()函数时..也没有调度任何内容，我也不知道如何显示调度值“ Mike”，其中说“嗨，我的名字是...” < / p>

下面是我的代码。任何帮助将不胜感激

import React from 'react';
import './App.css';
import {changeName} from './reducers.js'
import {createStore} from 'redux';
import {changeNameAction} from './actions'
import {connect} from 'react-redux';

var store = createStore(changeName);

const App = ({buttonClick=f=>f }) => {
      return(
      <div className="App">
        <div> Hi my name is {}  </div>
        <div><button onClick={()=> buttonClick("Mike")}>Change name</button></div>
      </div>
    )
};

const mapStateProps = (state) => {
    return {
        name: state.name
    }
}

const mapDispatchToProps = dispatch => {
    return {
        buttonClick(name){
            dispatch(changeNameAction(name))
        }
    }
}

const Container = connect(mapStateProps,mapDispatchToProps)(App);
export default Container;

Answer 1

我目前无法测试您的代码，但是您可以尝试以下操作：

// The connected props are part of the arguments
const App = ({ buttonClick = () => {}, name = '' }) => {
    return(
      <div className="App">
        {/* This way you can render the name prop */}
        <div> Hi my name is {name}</div>
        {/* Execute the function instead of returnning it */}
        <div><button onClick={() => { buttonClick("Mike"); }}>Change name</button></div>
      </div>
    )
};

const mapStateProps = (state) => {
    return {
        name: state.name
    }
}

const mapDispatchToProps = dispatch => {
    return {
        // Key value pair
        buttonClick: (name) => {
            dispatch(changeNameAction(name))
        }
    }
}

希望有帮助

Answer 2

对不起，但是您缺少太多的redux概念，请检查the redux doc，此代码应该可以工作：

import React from "react";
import { createStore } from "redux";
import { connect, Provider } from "react-redux";

const CHANGE_NAME = "CHANGE_NAME";
const changeNameAction = name => ({
  type: CHANGE_NAME,
  payload: name
});

const initialState = { name: "Taym" };
const changeName = (state = initialState, action) => {
  const { type, payload } = action;
  switch (type) {
    case CHANGE_NAME:
      return Object.assign({}, state, { name: payload });
    default:
      return state;
  }
};

const store = createStore(changeName);

const App = ({ buttonClick }) => {
  return (
    <Provider store={store}>
      <div className="App">
        <NameComponent />
      </div>
    </Provider>
  );
};

export default App;

const ConnectedNameComponent = ({ buttonClick, name }) => {
  return (
    <>
      <div> Hi my name is {name} </div>
      <div>
        <button onClick={() => buttonClick("Mike")}>Change name</button>
      </div>
    </>
  );
};
const mapStateProps = state => {
  return {
    name: state.name
  };
};

const mapDispatchToProps = dispatch => {
  return {
    buttonClick(name) {
      dispatch(changeNameAction(name));
    }
  };
};

const NameComponent = connect(
  mapStateProps,
  mapDispatchToProps
)(ConnectedNameComponent);

Answer 3

非常感谢您的回答。您回应的Taym工作成功。我意识到问题出在我没有使用状态运算符。

所以在我采取这样的行动之前

export const changeName =（state，action）=> {

    if(action.type === "CHANGE_NAME"){

        return {action.payload};

    } else {
        return state;
    }

}

然后我就这样更改了

export const changeName = (state,action) => {

    if(action.type === "CHANGE_NAME"){

        //I added the spread operator.. and it worked. Thank you so much!
        return {...state,name:action.payload};

    } else {
        return state;
    }

}

价值没有得到分配

3 个答案: