Question

我想尝试一个简单的例子。这是下面的代码。

在此示例中，位于：

mapStateToProps = (state) => {}

state来自哪里？关于我究竟要进入什么地方，我感到很困惑？

我了解connect(mapStateToProps)(TodoApp)将mapStateToProps中返回的状态“绑定”到TodoApp，然后可以通过this.props进行访问。

我需要对此代码执行哪些操作才能打印出TodoApp

中的当前状态

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { connect } from 'react-redux'
import { createStore } from 'redux'
import { combineReducers } from 'redux'


const stateObject = [
    {
        'id': 1,
        'name': 'eric'
    },
    {
        'id': 2,
        'name': 'john'
    }
]

const todo = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text
            }
        default:
            return state
    }
}


const todos = (state = stateObject, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...state,
                todo(undefined, action)
            ];
        default:
            return state
    }
}



const store = createStore(todos)

//confused by what is happening here
const mapStateToProps = (state) => {
    return {
        ?: ?
    }
}

const TodoApp = () => {
    //How do I get this to print out the current props?
    console.log(this.props)
    return (
        <div>
            Some Text
        </div>
    )
}

connect(mapStateToProps)(TodoApp)


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

好的更新：

const mapStateToProps = (state) => {
    return {
        names: state
    }
}

const TodoApp = () => {
    console.log(this.props)
    return (
        <div>
            Some Text1
        </div>
    )
}

const ConnectedComponent = connect(mapStateToProps)(TodoApp);


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

但我仍然undefined获得console.log(this.props)。

我做错了什么？

Answer 1

mapStateToProps将Redux状态的某些部分映射到React Component的道具。

状态来自您的store。事实上，您可以通过致电store.getState()随时查看您当前的状态。执行createStore(todos)时，会根据todos减速器创建状态。正如您在todos缩减器中看到的那样，您的初始状态来自stateObject，其定义在顶部。

所以，回到mapStateToProps。您需要在该函数中执行的操作是返回对象，其中键将是props，值将是从Redux状态获得的值。以下是mapStateToProps：

的示例

const mapStateToProps = function (state) {
    return {
        propName: state
    }
}

现在，当您在render（）内部执行console.log(this.props)时，您可以看到整个状态存储在this.props.propName中。这是通过mapStateToProps实现的。

关于此的一点理论：每次调度一个动作时，你的应用程序中每个mapStateToProps都会被调用，道具会应用于你创建的每个组件，如果任何道具发生了变化，那个组件将重新渲染。通过connect功能为您提供此类行为。因此，您不必为每个组件实现此行为：您需要做的就是这样做：const ConnectedComponent = connect(mapStateToProps)(SomeComponent)并使用ConnectedComponent而不是SomeComponent。

Answer 2

没有this功能组件。要访问道具，您可以将其更改为：

const TodoApp = (props) => {
    console.log(props)
    return (
        <div>
            Some Text1
        </div>
    )
}

在Redux中使用mapStateToProps

2 个答案: