Question

我有一个关于react-redux的问题，我正在玩一些小的测试代码，以了解它是如何工作的。

一切看起来都正确，动作生成器，减速器，调度程序，mapStateToProps和连接功能。

我也会在这里粘贴代码：

没有国家变异。

但是当子组件Todo（index.jsx）调用从main（有问题的组件）TodoBox（index.jsx）传递给它的函数（onClick事件）时，那么 1.调度员被解雇了 2. reducer被触发并返回具有预期更新的新状态 3. mapStateToProps被触发并返回预期结果

但是TodoBox组件不会重新渲染从浏览器控制台我可以看到TodoBox的this.props已经更新了值。

发生了什么，我无法理解，检查了很多文章和例子但没有匹配。

谁能发现问题，我需要帮助。

app.js（反应入口点）

＆＃13;

import React from 'react';
import ReactDOM from 'react-dom';
import TodoBox from './views/index.jsx';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import * as actions from './redux_actions.js';

var data = JSON.parse(document.getElementById('initial-data').getAttribute('data-json'));

const todosReducer = function (state={todos: data}, action) {
  switch(action.type) {
    case actions.UPDATE_TODO:
        let newState = Object.assign({}, state)
        let upd1 = updateRow(newState.todos, 'titel', action.todoUpdate.id, 'checked', action.todoUpdate.checked)
        newState.todos = updateRow(upd1, 'titel', action.todoUpdate.id, 'detail', action.todoUpdate.checked ? 'Done' : 'Sorry not done')
        return newState
      break;
    default:
        return state;
  }
}

function updateRow(tab, where, val, updfield, val2) {
    tab.forEach( (row) => {
        row[where] === val ? row[updfield] = val2 : null
    })
    return tab
}

var Store = createStore(todosReducer)

ReactDOM.render(<Provider store={Store}><TodoBox /></Provider>, document.getElementById("app"));

＆＃13;

index.jsx

＆＃13;

import React from 'react';
import * as Redux from 'redux';
import { connect } from 'react-redux'
import * as actions from '../redux_actions.js'


class TodoBox extends React.Component {
        render() {
            return (
                <div className="todoBox">
                    <h1>Todos</h1>
                    <TodoList data={this.props.todos} func={this.props.handleChange}/>
                    <TodoForm />
                </div>
            );
        }
    }



class TodoList extends React.Component {
  render() {
     let todo = this.props.data.map( (todos) => { return <Todo titel={todos.titel} func={this.props.func} check={todos.checked} key={todos.titel}>{todos.detail}</Todo> } )
     return (
        <div className="todoList">
            <table style={{border: "2px solid black"}}>
              <tbody>
                 {todo}
              </tbody>
            </table>
        </div>
     );
  }
}


class Todo extends React.Component {
   render() {
    return (
      <tr>
        <td style={style.tableContent}>
           <input id={this.props.titel} type="checkbox" checked={this.props.checked} onChange={this.props.func}/>
        </td>
        <td style={style.tableContent}>{this.props.titel}</td>
        <td style={style.tableContent}>{this.props.children}</td>
      </tr>
    );
   }
}


Todo.propTypes = {
   titel: React.PropTypes.string.isRequired
}


class TodoForm extends React.Component {
  render() {
    return (
        <div className="todoForm">
        I am a TodoForm.
        </div>
     );
  }
}

let style = {
        tableContent: {
            border: "1px solid black"
        }
    };


const mapStateToProps = function (state) {
   return { todos: state.todos }
}

const mapDispatchToProps = function(dispatch) {
  return {
    handleChange: function(event) {
      dispatch(actions.actionUpdateTodo({id: event.target.id, checked: event.target.checked}));
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoBox)

＆＃13;

redux_actions.jsx

＆＃13;

export const UPDATE_TODO = 'UPDATE_TODO'

export function actionUpdateTodo(todoUpdate) {
  return { type: UPDATE_TODO, todoUpdate: todoUpdate }
}

＆＃13;

Answer 1

请检查http://redux.js.org/docs/Troubleshooting.html

您似乎正在改变您的商店。问题在于你的减速机。

我强烈建议您阅读pure functions。

const todosReducer = function (state={todos: data}, action) {
  switch(action.type) {
    case actions.UPDATE_TODO:
        let newState = Object.assign({}, state)
        let upd1 = updateRow(newState.todos, 'titel', action.todoUpdate.id, 'checked', action.todoUpdate.checked)
        newState.todos = {...updateRow(upd1, 'titel', action.todoUpdate.id, 'detail', action.todoUpdate.checked ? 'Done' : 'Sorry not done')} //should do the trick. Although I would strongly suggest you to refactor the updateRow function.
        return newState //even so you are returning a newState, the reference value (todos) is not a new instance.
      break;
    default:
        return state;
  }
}

function updateRow(tab, where, val, updfield, val2) {
    tab.forEach( (row) => {
        row[where] === val ? row[updfield] = val2 : null
    })
    return tab
}

react-redux connect不会重新渲染组件，但会更新道具

1 个答案: