使用React Redux的通用组件

Question

I am struggling a bit with the concept of global state and reusable components in redux.

Let's say I have a component that's a file-selector that I want to use in multiple places inside my applications state. Creating action/reducers leads to a lot of bloat as I have to handle states with dynamic suffixes and other weird things that just don't really strike me as a smart way to go about things.

What's the general consensus on these things? I can only see two solutions:

• Make the file-selector component have local state ( this.setState/this.getState )

• Make the file-selector be part of the global state but in it's own unique reducer that I can read from once the operation of the component is done?

Any ideas / best practices? Thanks.

Update : To clarify the file selector I am describing is not a simple component that works purely on the client side but has to fetch data from the server, provide pagination as well as filtering etc.. That's why I'd also like to reuse most of the client/server interaction. The views that display this component are of course dumb and only display values from the state - but how do I reuse the actions/reducers in multiple places around the application?

Answer 1

Have your reducer handle multiple instances of your component state. Simply define some "unique" ID for each instance of your FileBrowser component when it appears in the app, and wrap your current state in an object with this uniqueIds as keys, and your old complex state as value.

This is a technique I've used multiple times. If all your FileBrowser are known at compile time, you can even setup the initial state before running your app. If you need to support "dynamic" instances, simply create an Action that initializes the state for a given id.

You didn't provide any code, but here's a contrived example for a reusable Todo reducer:

function todos(state={}, action){
  switch(action.type){
    case 'ADD_TODO':
      const id = action.todoListId
      return {
         ...state,
         [id]: {
            ...state[id],
            todos: [ ...state[id].todos, action.payload ]
         }
      }
      // ... 
  }
}

Answer 2

Usually, the rule of thumb is that you use a redux store to manage data in your application aka storing items fetched from the server and local react state for ui behaviors, like file uploads in your case. I'd make a pure react component to manage file uploads and then use redux-form to manage specific form.

Here is the example of the component I use in my project

import React, {Component, PropTypes} from 'react';
import Button from 'components/Button';

class FileButton extends Component {
  static propTypes = {
    accept: PropTypes.string,
    children: PropTypes.any,
    onChange: PropTypes.func.isRequired
  };

  render() {
    const {accept, children, onChange} = this.props;
    return <Button {...this.props} onClick={() => this.file.click()}>
      <input
        ref={el => this.file = $(el)}
        type="file"
        accept={accept}
        style={{display: 'none'}}
        onChange={onChange}
      />
      {children}
    </Button>;
  }
}

export default FileButton;

Answer 3

We came to the conclusion that reusable components must be of two kinds:

• dumb components, ie components that only receive props and trigger "actions" via props callbacks only. These components have minimal internal state or at all. These are the most frequent of reusable components, and your file selector will probably fall in that case. A styled Text Input or custom List would be good examples too.

• connected components that provide their own actions and reducer. These components have their own life within the application and are rather independent from the rest. A typical example would be a "top error message box" that displays on top of everything else when the application fails critically. In such a case the application triggers an "error action" with the appropriate message as payload and on the following re-render, the message box displays on top of the rest.