Question

这是我在redux的第二天该应用程序的基本结构是

App
-TodoForm
-TodoList
--TodoListItem

reducer函数被调用但它没有调用mapStateToProps。我试过控制台日志我用过反应热模板请告诉我为什么不调用mapStateToProps函数的原因。

https://github.com/rickieanand/reduxTodo

导入React，{Component}来自＆＃39;反应＆＃39 ;; 从＆＃39; react-dom＆＃39;中导入ReactDOM; 从＆＃39; redux＆＃39;导入{createStore} 从＆＃39; react-redux＆＃39;

导入{Provider，connect}

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

Answer 1

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

const ConnectedApp = connect(mapStateToProps)(App);

然后：

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

React- mapStateToProps函数未在我的todo应用程序中调用

1 个答案: