react-sortable/others/index_redux.js

Make your React components sortable.

import React from 'react'
import { render } from 'react-dom'
import { Provider, connect } from 'react-redux'
import { createStore } from 'redux'

import SortableList from './real-world-list-redux/SortableList';

let initialState = {
  items: [
    "Gold",
    "Crimson",
    "Hotpink",
    "Blueviolet",
    "Cornflowerblue",
    "Skyblue",
    "Lightblue",
    "Aquamarine",
    "Burlywood"
  ]
}

const sortableStore = (state = initialState, action) => {
  switch (action.type) {
    case 'SORT_ITEMS':
      return Object.assign({}, state, {
        items: action.items
      })
    default:
      return state
  }
}


let store = createStore(sortableStore, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

export const sortItems = items => {
  return {
    type: 'SORT_ITEMS',
    items
  }
}


const mapStateToProps = state => {
  return {
    items: state.items
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onSortItems: items => {
      dispatch(sortItems(items))
    }
  }
}



const SortableListRedux = connect(
  mapStateToProps,
  mapDispatchToProps
)(SortableList)


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