# @mung-office/redux-socket

> redux and socket collaborator

Latest version **0.4.0** (published 2020-10-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mung-office/redux-socket
pnpm add @mung-office/redux-socket
yarn add @mung-office/redux-socket
bun add @mung-office/redux-socket
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2020-10-10 |
| First published | 2020-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 18.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | JeongTae Park |
| Maintainers | pjt3591oo |
| Keywords | socket, socket.io, socketio, react, redux |

## Links

- npm: https://www.npmjs.com/package/@mung-office/redux-socket
- Repository: https://github.com/pjt3591oo/redux-socket
- Homepage: https://github.com/pjt3591oo/redux-socket#readme
- Issues: https://github.com/pjt3591oo/redux-socket/issues
- npm.io page: https://npm.io/package/@mung-office/redux-socket

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.13.1
- [@types/jest](https://npm.io/package/@types/jest.md) ^24.0.0
- [@types/node](https://npm.io/package/@types/node.md) ^12.0.0
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.0
- [@types/socket.io-client](https://npm.io/package/@types/socket.io-client.md) ^1.4.34

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2020-10-10
- 0.3.0 — 2020-10-08
- 0.2.1 — 2020-10-07
- 0.2.0 — 2020-10-07
- 0.1.1 — 2020-10-07
- 0.1.0 — 2020-10-07

## README

# redux-socket

* 설치

```sh
$ npm install --save @mung-office/redux-socket
```

[Sample](https://github.com/pjt3591oo/redux-socket-example) 보러가기

### redux - 리듀서 생성

`store/modules/chat.ts`

```tsx
type ChatState = {
  msg: string,
  senderId: number
}

const initialState:any = []

const ADD = 'CHAT/ADD'
const LAST_REMOVE = 'CHAT/LAST_REMOVE'

export const onAddChat = (payload: ChatState):any => (dispatch: any) => {
  dispatch({
    type: ADD,
    payload
  })
}

export const onLastRemove = (payload: ChatState):any => (dispatch: any) => {
  dispatch({
    type: LAST_REMOVE
  })
}

type ChatAction =
  | ReturnType<typeof onAddChat>
  | ReturnType<typeof onLastRemove>;

export function chat(
  state: any = initialState,
  action: ChatAction
) {
  let msgs =  [...state]
  switch (action.type) {
   
    case ADD:
      msgs.push(action.payload)
      return msgs
    
    case LAST_REMOVE:
      return msgs.slice(0, msgs.length-1)
    
    default: 
      return state
  }

}
```

### redux - 스토어 생성

`store/index.ts`

```tsx
import { combineReducers } from 'redux'
import { createStore, applyMiddleware } from "redux"
import { composeWithDevTools } from "redux-devtools-extension/developmentOnly";

import thunk from "redux-thunk"

import {chat} from './modules/chat';

const rootReducer = combineReducers({
  chat
});

const configureStore = () => {
  // const sagaMiddleware = createSagaMiddleware()

  const store = createStore(
    rootReducer,
    composeWithDevTools(
      applyMiddleware(
        thunk,
        // sagaMiddleware
      )
    )
  )

  // sagaMiddleware.run(rootSaga)

  return store
}

// 루트 리듀서 내보내기
export default configureStore();
```

### redux - 앱에추가

`App.tsx`

```tsx
import React from 'react'

import { Provider as ReduxProvider } from "react-redux"
import store from './store'

import {Provider as ReduxSocketProvider} from '@mung-office/redux-socket'
import socket from './socket'

import ChatComponent from './components/chat'
  

function App() {

  return (
    <div className="App">
      <ReduxProvider store={store}>
        <ChatComponent>
      </ReduxProvider>
    </div>
  );
}

export default App;
```

### 소켓 - 생성

`socket/index.ts`

```tsx
import { Socket, Decorators } from '@mung-office/redux-socket'
import { onAddChat } from '../store/modules/chat'

class S extends Socket {
  constructor(host: string) {
    super(host)
  }

  @Decorators.listener()
  public receive(socket, store) {
    socket.on('/msg', (data) => {
      store.dispatch(onAddChat({
        msg: data.msg.msg,
        senderId: data.senderId
      }))
    })
  }

  @Decorators.emitter("/msg")
  public send(props) {
    let [socket, store, payload] = props
    console.log(payload)
  }

}
let s = new S("ws://localhost:4000")

export default s

```

`@Decorators.listener` 붙은 메서드들 자동으로 호출하여 리스너를 만들어준다.

`@Decorators.emitter('event')` 해당 메서드 호출시 데코레디터를 통해 전달된 이벤트 발생 후 `[socker, store, payload]` 인자를 받는 함수를 호출한다.

### 소켓 - 컨텍스트 생성

`App.tsx`

```tsx
import React from 'react'

import { Provider as ReduxProvider } from "react-redux"
import store from './store'

import {Provider as ReduxSocketProvider} from '@mung-office/redux-socket'
import socket from './socket'

import ChatComponent from './components/chat'
  

function App() {

  return (
    <div className="App">
      <ReduxProvider store={store}>
        <ReduxSocketProvider store={store} socket={socket}>
          <ChatComponent />
        </ReduxSocketProvider>
      </ReduxProvider>
    </div>
  );
}

export default App;
```

### use socket

`components/chat/index.tsx`

```tsx
import React, { useState } from "react"
import { useSelector } from "react-redux"
import  { useSocket }  from "@mung-office/redux-socket"

const ChatComponent = (props) => {
  let data:any = useSelector<any>(state => ({
    msgs: state.chat
  }))
 
  let [msg, setMsg] = useState("")
  let socket: any = useSocket()

  return (
    <>
      <div>
        <input type="text"
          value={msg}
          onChange={e => setMsg(e.target.value)}
        />
        <button
          onClick={() => socket.send(msg)}
        > 
          전송
        </button>
      </div>
      <ul>
        {data.msgs.map((msg, idx) => (
          <li key={idx}>
            <span>(유저){msg.senderId}: </span>
            <span>(메시지){msg.msg}</span>
          </li>
        ))}
      </ul>
    </>
  )
}

export default ChatComponent
```

---
_Source: https://npm.io/package/@mung-office/redux-socket · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._