Question

只需尝试在此处构建一个简单的react-redux代码。每当我单击带有附加数据值的按钮之一时，我只希望它使用它来更新我的应用程序的状态。目录组成为：

src/index.js
src/App.js
src/reduxButtonGroup.js
src/reduxActions.js
src/reducers/index.js
src/reduxStore.js
src/reduxHelloWorld.js

现在，这里的代码是 App.js 的样子：

import React from 'react';
import HelloWorld from './reduxHelloWorld.js';
import {store} from './reduxStore.js'
import ButtonGroup from './reduxButtonGroup.js';
import 'bootstrap/dist/css/bootstrap.min.css';


class App extends React.Component {
  render(){
    return(
      <React.Fragment>
     <HelloWorld name = {store.getState().name} />
     <ButtonGroup names = {["NameA","NameB","NameC"]}/>
     </React.Fragment>
      )
  }
}
export default App;

这是 reduxButtonGroup.js 的样子：

import React from 'react';
import Button from 'react-bootstrap/Button';
import {store} from './reduxStore.js';
import {setName} from './reduxActions.js';

const ButtonGroup = ( {names} ) => (
  <div>
    {names.map((name,i) =>  (
      <Button data-name={name} key={`btn-${i}`} style={{marginRight: "15px"}} className={"btn btn-danger"} onClick={dispatchBtnAction}>
        {name}
      </Button> 
    ))}
  </div>
);

function dispatchBtnAction(e){
    const name = e.target.dataset.name;
    console.log(name);
    store.dispatch(setName(name));
}

export default ButtonGroup;

和 reduxActions.js ：

export function setName (name) {
  return {
     type: "SET_NAME",
     name: name
   }
}

此外， reducers / index.js ：

export default (state,action) => {
    console.log(action.name)
    switch(action.type){
        case "SET_NAME":
        console.log("here")
            return{
                ...state,
                name: action.name
            };

        default:
            return state;
        }   
};

这是 reduxStore.js 的样子：

import {createStore} from 'redux';
import reducer from "./reducers";

const initialState = { name: "initialName " };
export const store = createStore(reducer, initialState);

最后是 reduxHelloWorld.js ：

import React from 'react';

class HelloWorld extends React.Component{

    render(){
        return(
            <React.Fragment>
                <h1>Hello {this.props.name}</h1>
            </React.Fragment>
            )
    }
}

export default HelloWorld;

现在，在终端中，我可以在action.type和action.name中看到正确的值。但是我认为下面显示的部分不起作用。即，我无法将名为name的状态变量更新为action.name。

return{
                    ...state,
                    name: action.name
                };

尽管我获得了正确的值，但是我的组件没有以正确的值呈现。知道我在这里做错了什么。任何帮助将不胜感激。

React REDUX不会将状态更新为新状态

0 个答案: