Question

我在Redux中非常新。我已经构建了简单的计数器应用程序，我想添加隐藏元素＆＃39;特征。所以，我必须通过props.show。我究竟能做到这一点？我需要创建新的reducer，还是可以将此值添加到mapStateToProps？

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, show) {
return {
  count: state,
  //???
 };
}

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

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

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 = 0,  action) => {
    switch(action.type) {
        case 'INCREMENT':
            return state = state + 1;
        case 'DECREMENT':
            return state= state - 1;
        case 'HIDE':
         //???
            // return show = true;
        default:
            return state;
  }
 };

const store = createStore(counter);

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

Answer 1

如果您打算继续使用counter reducer，首先需要将默认状态从单个整数更改为具有两个属性（counter和show）的对象

const INITIAL_STATE = {
  counter: 0,
  show: true,
}

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

有了这个，现在您需要将关联的组件从props.count更改为props.count.counter和props.count.show，或者只需将它们映射到mapStateToProps：

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

Answer 2

将您的减速器更改为此

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

在您的组件中添加show按钮并获取计数和隐藏状态

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>
            <button onClick={props.show}>show</button>
            {!props.hide ? <p>hello world!</p> : null}
        </div>
    );
};

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

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

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

Answer 3

您可以创建新的reducer，但这不是必需的。您可以做的不是维护state=0，而是拥有一个带有两个键的对象：count and show。

像这样：

const initialState = {
    count: 0,
    show: true,
}

const counter = (state = initialState,  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};
        case 'SHOW':
            return {...state, show: true}
        default:
            return state;
    } 
};

现在在组件内部，从商店中读取count和show并将其传递给组件：

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

Redux的第一步。如何为mapStateToProps增加价值？

3 个答案: