Javascript Redux的第一步。如何为MapStateTops添加价值？

我是Redux的新手。我已经建立了简单的计数器应用程序，我想添加“隐藏元素”功能。所以，我必须通过

道具。show

。我到底怎样才能做到？是否需要创建新的减速器，或者我可以将此值添加到

MapStateTrops

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);

从“React”导入React；
从“react redux”导入{connect}
常量应用=（道具）=>{
返回(
{props.count}

+
-
隐藏
{props.show？你好，世界！
：null}
);
};
函数MapStateTops（状态，显示）{
返回{
伯爵：国家，
//???
};
}
功能图DispatchToprops（调度）{
返回{
增量：（）=>分派（{type:'increment'}），
减量：（）=>分派（{type:'decrement'}），
隐藏：（）=>分派（{type:'hide'}）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

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')
 );

从“React”导入React
从'react dom'导入{render}
从“./App.js”导入应用程序
从“react redux”导入{Provider}
从“redux”导入{createStore}
常量计数器=（状态=0，操作）=>{
开关（动作类型）{
案例“增量”：
返回状态=状态+1；
“减量”一案：
返回状态=状态-1；
“隐藏”案例：
//???
//返回显示=真；
违约：
返回状态；
}
};
常量存储=创建存储（计数器）；
渲染(
,
document.getElementById（'root'））
);

将减速器换成这个

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;
    }
 };

在组件中添加“显示”按钮并获取计数和隐藏状态

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);

从“React”导入React；
从“react redux”导入{connect}
常量应用=（道具）=>{
返回(
{props.count}

+
-
隐藏
显示
{！props.hide？你好，世界！
：null}
);
};
函数MapStateTops（状态）{
返回{
count:state.count，
隐藏：state.hide
};
}
功能图DispatchToprops（调度）{
返回{
增量：（）=>分派（{type:'increment'}），
减量：（）=>分派（{type:'decrement'}），
隐藏：（）=>分派（{type:'hide'}），
show:（）=>分派（{type:'show'}）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

您可以创建新的减速器，但这不是必需的。您可以做的不是维护

state=0

，而是使用一个带有两个键的对象：

count和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
    };
}

---

如果计划继续使用

计数器

减速机，首先需要将默认状态从单个整数更改为同时具有两个属性的对象（

计数器

和

显示

）

现在，您需要将连接的组件从

props.count

更改为

props.count.counter

和

props.count.show

，或者只需将它们映射到

MapStateTops

：

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

---

您需要一个对隐藏和显示操作作出反应的减速器。在

MapStateTops

中，选择类中需要的属性。e、 g.

{hidden:state.app.hidden}

mapStateToProps

不需要第二个参数

show

。该参数实际上是

ownProps

，或者以传统的React样式从父组件直接传递到组件的属性，但不是必需的。您只需使用

mapstatetops（state）

就可以了，我可能是从他的代码中复制的，但忘了删除：）

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