Redux新手疑问：如何传递props.show实现元素隐藏？是否需新增reducer？

Hey there! Let's get that hide feature working for you. You don't need to create a new reducer—we can adjust your existing setup by restructuring your Redux state to track both the count and the visibility state. Here's how to do it step by step:

1. Restructure Your Redux State & Update the Reducer #

Right now, your state is just a single number (the counter value). We need to expand it into an object that holds both count and show (our visibility flag).

Update your counter reducer in index.js:

const counter = (state = { count: 0, show: true }, action) => {
  switch(action.type) {
    case 'INCREMENT':
      // Return a new object: keep show as is, increment count
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      // Same logic, decrement count
      return { ...state, count: state.count - 1 };
    case 'HIDE':
      // Set show to false when the hide button is clicked
      return { ...state, show: false };
      // If you want a toggle (hide/show on each click), use this instead:
      // return { ...state, show: !state.show };
    default:
      return state;
  }
};

Note: I added a comment for a toggle behavior in case you want the button to switch between hiding and showing the element later!

2. Update mapStateToProps to Include the show Property #

Now that your state is an object, you can pull both count and show into your component's props. Fix your mapStateToProps function in App.js:

function mapStateToProps(state) {
  return {
    count: state.count,
    show: state.show // Add this line to pass the visibility state
  };
}

Side note: The mapStateToProps function only takes state and ownProps as arguments—your original show parameter was unnecessary, so we removed it.

3. Verify Your Component Logic #

Your existing component code for showing/hiding the element is already correct:

{props.show ? <p>hello world!</p> : null}

When you click the "hide" button, it dispatches the HIDE action, the reducer sets show to false, and the <p> element will disappear.

Final Check #

Make sure your updated files look like this:

Updated App.js #

import React from 'react';
import { connect } from 'react-redux'

const App = (props) => {
  return(
    <div>
      <p>{props.count}</p>
      <button onClick={props.increment}>+</button>
      <button onClick={props.decrement}>-</button>
      <button onClick={props.hide}>hide</button>
      {props.show ? <p>hello world!</p> : null}
    </div>
  );
};

function mapStateToProps(state) {
  return {
    count: state.count,
    show: state.show
  };
}

function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({type: 'INCREMENT'}),
    decrement: () => dispatch({type: 'DECREMENT'}),
    hide: () => dispatch({type: 'HIDE'})
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Updated index.js #

import React from 'react'
import { render } from 'react-dom'
import App from './App.js'
import { Provider } from 'react-redux'
import { createStore } from 'redux'

const counter = (state = { count: 0, show: true }, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'HIDE':
      return { ...state, show: false };
    default:
      return state;
  }
};

const store = createStore(counter);

render(
  <Provider store={store} >
    <App />
  </Provider>,
  document.getElementById('root')
);

That's it! Your app will now track both the counter value and the visibility state. Clicking the "hide" button will make the "hello world!" paragraph disappear. If you want to add a "show" button later, you can add a SHOW action (or just use the toggle logic I commented earlier).

内容的提问来源于stack exchange，提问作者Italik