Question

所以，我遇到了Redux的问题。当我尝试通过todos组件中的console.log调用它时，我无法弄清楚我的Redux存储中的undefined每次等于AddTodos（参见第3个代码容器）？即使我在redux商店中手动添加todos。我错过了什么？

另外我想承认，this.props.store.getState() todos状态调用正常显示和更新。

/ *行动* /

import { ADD_TODO } from '../Variables/Variables'

function AddTodo(text) {
    return {
        type: ADD_TODO,
        text
    }
};

export default AddTodo

/ * REDUCER * /

import { ADD_TODO } from '../Variables/Variables'

const initialState = {
    todos: []
}

function TodoApp(state, action) {
    if (typeof state === 'undefined') {
        return initialState;
    }

    switch (action.type) {
        case ADD_TODO:
        return Object.assign({}, state, {
            todos: [
                ...state.todos, 
                {
                    text: action.text
                }
            ]
        });
        default: 
            return state;
    }
}

export default TodoApp;

/ * COMPONENT * /

import React from 'react';
import addTodos from '../../Modules/addTodos'

class AddTodos extends React.Component{   
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();

        let input = document.querySelector('input');
        addTodos(this.props.store, input.value);

        console.log('New state ', this.props.store.todos, this.props.store.getState()); 
                          // this.props.store.todos 
                          //- even got an undefined
        input.value = '';    
    }

    render() {
        return (
            <form id="tp" onSubmit={this.handleSubmit}>
                <input type="text" placeholder="Your text" />
                <button type="submit">Add todos</button>
            </form>
        );  
    }
}

export default AddTodos;

Answer 1

看起来你没有使用redux的反应绑定。使用它们，传递redux，因为道具违背了redux的大部分好处。

https://github.com/reactjs/react-redux

然后你将创建容器，他们将通过提供者接收状态。

无法从Redux商店

1 个答案: