react-redux-auto

auto-react-redux

Override some react-redux functions to auto-generate, connect, dispatch store, state ...

- No more actions, actions creator, just use the direct name of reducer
- No more: action, type ... just create a reducer with first param: state, followed by other args
- No more dispatch, no more mapStateToProps ... just use listen for re-render when state changed
- Full compatible with React-redux so we can use Redux debug tool for debugging

Example of usage:

// store.js
let todoReducers = {
  addTodo: (state, todo) => [...state, todo],
  asyncAdd: async (state, todo) => {
      await setTimeout(() => (), 1000);
      return [...state, todo];
  }
}

let appStore = {
  todos: {reducers: todoReducers, default: {}},
};

const $store = createAutoReduxStore(appStore);
let [$store, _reduxStore] = createAutoReduxStore(appStore);
export var reduxStore = _reduxStore;


// index.js
import {reduxStore} from './store';

render(
<Provider store={reduxStore}>
<App/>
</Provider>,
document.getElementById('root')
);

// Todo.js
import {listen} from "../react-redux-auto";

class Todo extends React.Component {
  render() {
      return <button onClick={$store.todos.asyncAdd('New task')}>
          {$store.todos.value.map(todo => <div>{todo}</div>)}
      </button>
  }
}

export default listen(todos)(Todo);