https://github.com/jide/react-redux-wire

Connect components directly without using containers
https://github.com/jide/react-redux-wire

Last synced: about 2 months ago
JSON representation

Connect components directly without using containers

• Host: GitHub
• URL: https://github.com/jide/react-redux-wire
• Owner: jide
• Created: 2016-12-07T00:50:07.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-08T15:09:38.000Z (about 8 years ago)
• Last Synced: 2024-04-23T20:53:53.511Z (8 months ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 17
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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(

  

    

  ,

  document.getElementById('root')

)

```