react-redux-wire

KO | EN

gitlite — search

#javascript #react #ai #golang #android #machine-learning #linux #docker #nodejs #awesome #cli #vue #security #pytorch

react-redux-wire

(★ 17)

Connect components directly without using containers

react-redux-wire 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Redux wire

Wire components directly to redux state without using containers.

You can learn how it works in [this article](https://medium.com/@jidefr/react-redux-wire-redux-without-containers-a4cf521ce5c#.5ei9914js).

An example is available [here](https://github.com/jide/react-redux-wire-todos).

## Installation

```
npm i --save react-redux-wire
```

Tell babel to use the custom createElement pragma :

```
// .babelrc
{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "createElement"
    }]
  ]
}
```

## Usage

```jsx
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
// Import createElement instead of React for JSX.
import { createElement, wire } from 'react-redux-wire'
import reducer from './reducers'
import { toggleTodo, addTodo, setVisibilityFilter } from './actions'
import App from './components/App'
import TodoList from './components/TodoList'
import AddTodo from './components/AddTodo'
import Link from './components/Link'

const store = createStore(reducer);

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}

// Add mapStateToProps and mapDispatchToProps statics onto components.
TodoList.mapStateToProps = state =>
  ({ todos: getVisibleTodos(state.todos, state.visibilityFilter) })

TodoList.mapDispatchToProps = dispatch =>
  ({ onTodoClick: id => dispatch(toggleTodo(id)) })

AddTodo.mapDispatchToProps = dispatch =>
  ({ addTodo: (...args) => dispatch(addTodo(...args)) })

Link.mapStateToProps = (state, ownProps) =>
  ({ active: ownProps.filter === state.visibilityFilter })

Link.mapDispatchToProps = (dispatch, ownProps) =>
  ({ onClick: () => dispatch(setVisibilityFilter(ownProps.filter)) })

// Wire components to redux.
wire(TodoList, AddTodo, Link)

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

```

react-redux-wire

react-redux-wire 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-redux-wire

react-redux-wire 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README