React - 在我的待办事项应用程序中没有调用 mapStateToProps 函数

Posted 2023-02-22

【中文标题】React - 在我的待办事项应用程序中没有调用 mapStateToProps 函数

【英文标题】：React - mapStateToProps function isn't getting called in my todo app

【发布时间】：2016-10-18 22:40:17

【问题描述】：

这是我使用 Redux 的第二天。

应用的基本结构是：

App
-TodoForm
-TodoList
--TodoListItem

reducer 函数被调用，但它没有调用 mapStateToProps。我试过console.log()。我用过react-hot-boilerplate。请让我知道mapStateToProps 函数未被调用的原因。

https://github.com/rickieanand/reduxTodo

import React, Component from 'react';
import ReactDOM from 'react-dom';
import  createStore from 'redux'
import  Provider, connect  from 'react-redux'

//store

let store = createStore(todo)


//actions
const ADD_TODO = 'ADD_TODO'
let x = 1
function addTodo(text) 
    return 
        type: ADD_TODO,
        id: x++,
            text: text
    


//reducer

function todo(state =  id: 0, text: "", completed: false , action) 
    console.log("reducer Called")
    console.log(action)

    switch (action.type) 
        case 'ADD_TODO':
            console.log(Object.assign(, state, 
                id: action.id,
                text: action.text,
                completed: false
            ) !== state)

            return Object.assign(, state, 
                id: action.id,
                text: action.text,
                completed: false
            )
        default:
            return state
    





//component App
class App extends Component 
    onHandleSubmit(text) 
        console.log('OnHandleSubmit Called')
        store.dispatch(addTodo(text))
        console.log('----------')
        store.getState()
        console.log('----------')
    
    render() 
        console.log(this.props)
        return (
            <div>
                <h1>Hello, world.</h1>
                <TodoForm onHandleSubmit=this.onHandleSubmit/>
                <TodoList/>
            </div>
        );
    


function mapStateToProps(state, ownProps) 
    console.log("mapStateToProps")
    console.log(state)
    console.log(ownProps)
    return 
        text: state.text,
        id: state.id,
        completed: false
    


connect(mapStateToProps)(App)

//component Form

class TodoForm extends Component 
    constructor(props) 
        super(props)
        //            this.handleAdd = this.handleAdd.bind(this)
    
    // handleAdd(e)
    // e.preventDefault()
    // console.log(e.target)
    // //dispatch(addTodo(e.value))
    // 
    render() 
        let input
        return (
            <div>
                <form onSubmit=e => 
                    e.preventDefault()
                    if (!input.value.trim()) 
                        return
                    
                    console.log(input.value)
                    this.props.onHandleSubmit(input.value)
                    //store.dispatch(addTodo(input.value))
                    //input.value = ''
                 >
                    <input ref=node => 
                        input = node
                      />
                    <button type="submit">
                        Add Todo
                    </button>
                </form>
            </div>
        );
    


//component TodoList
class TodoList extends Component 
    constructor(props) 
        super(props)
    
    render() 
        return (
            <ul><TodoListItem /></ul>
        );
    


//component TodoListItem
class TodoListItem extends Component 
    constructor(props) 
        super(props)
        this.handleDelete = this.handleDelete.bind(this)
    
    handleDelete(e) 
        e.preventDefault()
        console.log(e.value)
        //this.props.dispatch(addTodo(e.value));
    
    render() 
        return (
            <li>this.props.text<button id=this.props.id onClick=   this.handleDelete/></li>
        );
    


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

【问题讨论】：

首先，你不应该在一个文件中包含动作、reducers 等。可能值得重新开始redux.js.org/docs/basics/index.html

我明白，但我想一旦事情开始运作，我会使用文件夹结构。

尝试 Damien 方法，应该可以解决您的问题。

【参考方案1】：

connect(mapStateToProps)(App) 返回连接的组件。写；

const ConnectedApp = connect(mapStateToProps)(App);

然后：

ReactDOM.render(<Provider store=store><ConnectedApp /></Provider>, document.getElementById('root'));