Question

我必须显示用户列表，单击按钮后，我想在按钮内显示文本。 UserHeader是我从记录列表（PostList）导入的组件。我意识到的是，一旦单击按钮，动作就会在所有list元素上受到影响，我认为这是因为reducer的状态数组被记录填充，并且每次我显示UserHeader时，它都会在按钮内显示文本。我只想在已经处理的列表元素上显示文本，而不是整个列表。请帮助我如何使用Redux。我指的是UserHeader上的按钮的selectPost（）函数onClick

// reducers.js

export const Reducer_posts = (state=[], action) => {
  switch (action.type){
    case 'FETCH_POSTS':
      return action.payload
    default:
      return state;
  }

};

export const Reducer_users = (state=[], action) => {
  switch (action.type){
    case 'FETCH_USER':
      return [...state, action.payload];
    default:
      return state;
  }
};

export const Reducer_select = (state=[], action) => {
  switch (action.type){
    case 'SELECT_POST':
      return action.payload;

    case 'DELETE_SELECT':
      return null;

    default:
      return state;
  }
};


//UserHeader.js

import React from 'react';
import { connect } from 'react-redux';
import { fetchUser, selectPost, deleteSelect } from '../actions';

class UserHeader extends React.Component {

  componentDidMount () {
    this.props.fetchUser(this.props.userId);
  }


  render() {
    console.log(this.props.select)
    if(!this.props.user) {
      return <div> Loading... </div>
    }

      return <button onClick={this.props.selectPost} className="header"> {this.props.select} </button>


  }
}


const mapStateToProps = (state, ownProps) => {
  return {
    user: state.users.find(user => user.id === ownProps.userId),
    select: state.select
   };
}

export default connect(mapStateToProps, { fetchUser, selectPost, deleteSelect })(UserHeader);


//PostList.js

import React from 'react';
import { connect } from 'react-redux';
import { fetchPosts, selectPost } from '../actions';
import UserHeader from './UserHeader'

class PostList extends React.Component {

  componentDidMount(){
    this.props.fetchPosts();
  }

  renderList() {
    return this.props.posts.map(post => {
      return (

        <div className = "item" key={post.id}>
          <i className="large middle aligned icon user" />
            <div className="content">
              <div className = "description">
                <h2> {post.title} </h2>
                <p> {post.body} </p>
              </div>

              <UserHeader userId = {post.userId}/>
            </div>
        </div>

      )
    })
  }

  render(){
    return <div className = "ui relaxed divided list"> {this.renderList()} </div>;
  };
}

const mapStateToProps = state => {
  return { posts: state.posts, select: state.select };
};

export default connect( mapStateToProps, { fetchPosts, selectPost })(PostList);

Answer 1

您应该在状态元素上存储一个ID，这样您就可以根据需要对其进行管理。例子

// Let's imagine that this is your initial state. State here is an object of an x 
// object that contains n-object that represents your button.
//
const state = {
    myButtons: [
        {
            id: "unique_id",
            .
            .
        },
        {...}
    ],
    selectedBtn: -1,
}

在这种情况下，您可以轻松地获取要通过操作传递ID的按钮，因此reducer类似于：

export const Reducer_posts = (state=[], action) => {
  switch (action.type){
    case 'FETCH_POSTS':
      const newState = Object.assign({}, state);
      newState.myButtons.concat(action.payload)
      return Object.assign({}, newState)
    default:
      return state;
  }

};

export const Reducer_select = (state=[], action) => {
  switch (action.type){
    case 'SELECT_POST': // I think this is fired on click on a button 
      const newState = Object.assign({}, state);
      newState.selectedBtn = action.payload.btnId;
      return Object.assign({}, newState);
    case 'DELETE_SELECT': // when you have to delete a button
      const newState = Object.assign({}, state);
      newState.myButtons = 
      newState.myButtons.filter((el) => el.id !== action.payload.id)
      return Object.assign({}, newState);

    default:
      return state;
  }
};

现在，如果必须使用这样的结构来更改文本，可以使用过滤器并获取所需的按钮轻松访问此数组。在代码片段上，当代码到达reducer时，它只是返回action.payload，这实际上是错误的，因为redux的原理之一说状态应该是不可变的。我从here学到了redux，我知道一开始可能真的很困难

对列表的一个元素所做的更改会影响列表的所有元素

1 个答案: