Context-composer NPM

context-composer

redux를 사용하지 않고 react16.3.x 새로운 Context API로 데이터 관리 구현하기

Implement data management with react16.3.x new Context API without using redux

React 16.3.x version or higher

context-composer

Version

v1.0.9 - Added Logger function (2018.04.09)
v1.0.12 - Hotfix sorry, actions merge error (2018.04.09)

Install

npm install --save context-composer

Usage

src /
    assets/
    components/
    contexts/
    styles/
    views/

// contexts/User.js
import React, { Component } from 'react';

class User extends Component {
  state = {
    name: 'UserContext',
    list: [
      { id: 1, content: 111 },
      { id: 2, content: 222 },
      { id: 3, content: 333 },
      { id: 4, content: 444 }
    ]
  }
  actions = {
    onChange: (state, e, index) => {
      state.list[index].content = e.target.value;
      return state;
    },
    onInit: (state) => {
      state.list = [
        { id: 1, content: 111 },
        { id: 2, content: 222 },
        { id: 3, content: 333 },
        { id: 4, content: 444 }
      ]
      return state;
    }
  }
}

export default User;

// contexts/index.js
const req = require.context('.', true, /^(?!.\/index).*.js$/);

const modules = [];

req.keys().forEach((key) => {
  const regex = /.\/(.*?).js$/;
  const namespace = regex.test(key) && key.match(regex)[1];
  modules.push({ name: namespace, context: req(key).default });
});

export default modules;

// Root.js
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import contexts from './contexts';
import { Providers } from 'context-composer';

import App from './components/App';

const Root = (match) => {
  return (
    <Providers context={contexts} logger>
      <BrowserRouter>
        <Route path="/" component={App} />
      </BrowserRouter>
    </Providers>
  );
}

export default Root;

// views/TestView.js
import React, { Component, Fragment } from 'react';
import { connect } from 'context-composer';

class TestView extends Component {
  state = {}
  render() {
    const { list, onChange, onInit } = this.props;
    return (
      <Wrap>
        <p>Change input value without using redux</p>
        <ul>
          {
            list.map((item, index) => {
              return (
                <li key={item.id}>
                  <input type="text" value={item.content} onChange={e => onChange(e, index)}/>
                </li>
              );
            })
          }
        </ul>
        <button onClick={onInit}>init data</button>
      </Wrap>
    );
  }
}

export default connect(
  ({ state, actions }) => ({
    list: state.User.list,
    onChange: actions.User.onChange,
    onInit: actions.User.onInit
  })
)(TestView);