Reactjs 如何在react redux中组织还原程序和操作？

我觉得可能有比我做这件事更简单/更好的方法。我只是想简化文件组织。我正在处理导入错误，最新的错误是：未捕获引用错误：在Object.defineProperty.value中未定义visibilityFilter

index.js：

import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'

ReactDOM.render(<App />, document.getElementById('main'))

最后是reducer.js

/*
* action creators
*/

// action types
const ADD_TODO = 'ADD_TODO'
const TOGGLE_TODO = 'TOGGLE_TODO'
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'
const OWNEDBY = 'OWNEDBY_ADMIN'


export function addTodo (text) {
  return { type: ADD_TODO, text }
}

export function toggleTodo (index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter (filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

export function setOwner (role) {
    return {type: OWNEDBY, role}
}


/*
 * reducers
 */

const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

const { SHOW_ALL } = VisibilityFilters 

function visibilityFilter(state = SHOW_ALL, action) {

  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter

    default:
      return state
  }
}


function setOwner(state = [], action) {
  switch(action.type) {
    case OWNEDBY :
      return action.role

    default :
      return state;
  }

}


function todos(state = [], action) { 

  switch (action.type) {

    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]

    case TOGGLE_TODO:
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: !todo.completed
          })
        }
        return todo
      })

    default:
      return state
  }
}

import { combineReducers } from 'redux' //going round and round with this part, putting it everywhere
const rootReducer = combineReducers({ //this is super ugly
  visibilityFilter,
  todos,
  setOwner
});

---

我认为将操作和减缩器放在同一个文件中是有意义的，并且在您的站点上的每个小部件上都有一个这样的文件，可能在其附带组件旁边的文件夹中，但我无法让它工作。

因此，为了让应用程序在减缩器中有效地使用操作，我将以这种方式组织文件。 index.js如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container')); 

import React from 'react';
import {Component} from 'react';

import WidgetList from '../containers/widget-list';
import WidgetDetail from '../containers/widget-detail';

export default class App extends Component {
  render() {
    return (
      <div>
        <VisibilityFilter />
        <ToDos />
      </div>
    );
  }
}

export default function(state, action){
   switch(action.type) {
      case 'SET_VISIBILITY_FILTER':
        return action.payload;
   }
   return state;
}

是唯一对我有意义的部分，但是您希望通过在react中创建适当的组件来确保代码为应用程序生成可用状态。您需要一个密钥和值

const rootReducer = combineReducers({ });

例如：

const rootReducer = combineReducers({

    widgets: WidgetsReducer,
    activeWidget: ActiveWidget
});

export default rootReducer;

这些行动创造者：

export function addTodo (text) {
  return { type: ADD_TODO, text }
}

export function toggleTodo (index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter (filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

export function setOwner (role) {
    return {type: OWNEDBY, role}
}

我将组织到actions文件夹中的index.js文件中。为此：

function visibilityFilter(state = SHOW_ALL, action) {

  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter

    default:
      return state
  }
}

我会这样组织：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container')); 

import React from 'react';
import {Component} from 'react';

import WidgetList from '../containers/widget-list';
import WidgetDetail from '../containers/widget-detail';

export default class App extends Component {
  render() {
    return (
      <div>
        <VisibilityFilter />
        <ToDos />
      </div>
    );
  }
}

export default function(state, action){
   switch(action.type) {
      case 'SET_VISIBILITY_FILTER':
        return action.payload;
   }
   return state;
}

---

我看不出您正在从

reducer.js

导出

rootReducer

，这对于复杂的应用程序来说不太合适。如果状态对某个小部件是私有的，则根本不需要使用redux。您可以将状态存储在小部件组件的状态中。通常，当复杂性增加时，您会发现自己执行的操作位于不同的文件中，因为您最初认为它们“属于”另一个文件。事实上，动作根本不属于减速器。redux的关键优势在于，状态不属于某个组件，因此不应该有“附带”组件。因此，您是否在问visibilityFilter为什么会抛出错误，或者是组织redux还原程序和动作创建者的方法，或者两者都有。我认为这个错误是因为我对进出口的误解。