Question

我觉得这可能比我这样做更容易/更好。我只是想简化文件组织。我带着导入错误进入圈子，最新的是：未捕获的ReferenceError：在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'))

在App.js中：

var React = require('react')
var ReactDOM = require('react-dom')

import {Provider} from 'react-redux'

import Header from './Header'
import Footer from './Footer'

//material-ui imports here... (removed for conciseness)

//////////// REDUX RELATED //////////
import { createStore } from 'redux'
import * as reducers from '../reducers/reducer'

let store = createStore(reducers.rootReducer)

// Log the initial state
//console.log(store.getState())

let unsubscribe = store.subscribe(() => 
  console.log(store.getState())
)

// Dispatch some actions

store.dispatch(setOwner('Admin'))

// ...components removed for brevity...

最后在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
});

我认为将动作和缩减器放在同一个文件中是有意义的，并且对于您网站上的每个小部件都有其中的一个，可能在它自己的文件夹旁边，但是我不能让它工作。

Answer 1

所以这就是我组织文件的方式，以便应用程序在Reducers中有效地使用Actions。 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'));

注意App.js位于components文件夹中，我的app.js看起来像这样：

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>
    );
  }
}

在reducer.js中这一部分：

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

是唯一对我有意义的部分，但是您希望通过在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
  }
}

我会像这样组织它：

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

如何在react redux中组织减速器和动作？

1 个答案: