integrate redux to the FilterableProductTable, first step show productslist

Author: jerryni

package.json

@@ -5,8 +5,10 @@
   "dependencies": {
     "prop-types": "^15.6.0",
     "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2"
   },
   "devDependencies": {
     "eslint": "^3.19.0",
@@ -24,8 +26,11 @@
   },
   "lint-staged": {
     "gitDir": "./",
-    "linters":{
-      "src/**/*.jsx": ["eslint --fix", "git add"]
+    "linters": {
+      "src/**/*.jsx": [
+        "eslint --fix",
+        "git add"
+      ]
     }
   },
   "homepage": "https://jerryni.github.io/react-redux-practice/build"

src/actions/index.js

@@ -0,0 +1,23 @@
+import * as types from '../constants/ActionTypes'
+import products from '../mock/products'
+
+export const getProducts = () => {
+    return {
+        type: types.RECEIVE_PRODUCTS,
+        products
+    }
+}
+
+export const changeText = text => dispatch => {
+    dispatch({
+        type: types.TEXT_CHANGE,
+        text
+    })
+}
+
+export const changeInStock = isInStock => dispatch => {
+    dispatch({
+        type: types.INSTOCK_CHNAGE,
+        isInStock
+    })
+}

src/constants/ActionTypes.js

@@ -0,0 +1,3 @@
+export const TEXT_CHANGE = 'TEXT_CHANGE'
+export const INSTOCK_CHNAGE = 'INSTOCK_CHNAGE'
+export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'

src/index.js

@@ -1,8 +1,16 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {render} from 'react-dom'
+import {createStore} from 'redux'
+import {Provider} from 'react-redux'
+import reducer from './reducers'
+// import {get} from '.reducers'
 import App from './App.jsx'
 
-ReactDOM.render(
-  <App todos={[]}/>,
+const store = createStore(reducer)
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('root')
-);
+)

src/modules/FilterableProductTable.jsx

@@ -6,41 +6,45 @@
         - ProductRow：商品行
 **/
 import React from 'react'
+import {connect} from 'react-redux'
 import SearchBar from './SearchBar.jsx'
 import ProductTable from './ProductTable.jsx'
 import products from '../mock/products'
+import * as actions from '../actions/index'
+import * as types from '../constants/ActionTypes'
 
 // import PropTypes from 'prop-types'
 class FilterableProductTable extends React.Component {
-  state = {
-    filterText: '',
-    inStockOnly: false
-  }
-  handleFilterTextChange(filterText) {
-    this.setState({
-      filterText
-    })
-  }
-  handleInStockChange(inStockOnly) {
-    this.setState({
-      inStockOnly
-    })
-  }
-  render() {
-    return (
-      <div>
-        <SearchBar 
-          filterText={this.state.filterText}
-          inStockOnly={this.state.inStockOnly}
-          onFilterTextChange={this.handleFilterTextChange.bind(this)}
-          onInStockChange={this.handleInStockChange.bind(this)}/>
-        <ProductTable 
-          products={products}
-          filterText={this.state.filterText}
-          inStockOnly={this.state.inStockOnly}/>
-      </div>
-    )
-  }
+    componentDidMount() {
+        this.props.getProducts()
+    }
+    render() {
+        const {filterText, isInStock, products} = this.props
+        return (
+            <div>
+                <SearchBar
+                    filterText={filterText}
+                    inStockOnly={isInStock}
+                    // onFilterTextChange={this.handleFilterTextChange.bind(this)}
+                    // onInStockChange={this.handleInStockChange.bind(this)}
+                    />
+                <ProductTable
+                    products={products}/>
+            </div>
+        )
+    }
 }
 
-export default FilterableProductTable
+const mapStateToProps = store => ({
+    products: store.products.products,
+    filterText: store.products.filterText,
+    inStock: store.products.isInStock
+})
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        getProducts: (...args) => dispatch(actions.getProducts(...args))
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FilterableProductTable)

src/modules/ProductTable.jsx

@@ -10,58 +10,37 @@ import ProductCategoryRow from './subModules/ProductCategoryRow.jsx'
 import ProductRow from './subModules/ProductRow.jsx'
 import PropTypes from 'prop-types'
 class ProductTable extends React.Component {
-  static propTypes = {
-    products: PropTypes.array
-  }
+    static propTypes = {
+        products: PropTypes.array
+    }
 
-  static defaultProps = {
-    products: []
-  }
+    static defaultProps = {
+        products: []
+    }
 
-  render() {
-    let rows = []
-    let lastCategory = null;
-    const filterText = this.props.filterText;
-    const inStockOnly = this.props.inStockOnly;
+    render() {
+        let { products } = this.props
+        return (
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Price</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                        products.map(product => {
+                            return <ProductRow
+                                product={product}
+                                key={product.name} />
+                        })
+                    }
+                </tbody>
 
-    this.props.products.forEach((product) => {
-      if(product.name.indexOf(filterText) === -1) {
-        return;
-      }
-      
-      if (inStockOnly && !product.stocked) {
-        return;
-      }
-
-      if (product.category !== lastCategory) {
-        rows.push(
-          <ProductCategoryRow
-            category={product.category}
-            key={product.category} />
-        );
-      }
-      rows.push(
-        <ProductRow
-          product={product}
-          key={product.name} />
-      );
-      lastCategory = product.category;
-    })
-    return (
-      <table>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Price</th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows}
-        </tbody>
-
-      </table>
-    )
-  }
+            </table>
+        )
+    }
 }
 
 export default ProductTable

src/reducers/index.js

@@ -0,0 +1,8 @@
+import {
+    combineReducers
+} from 'redux'
+import products from './products'
+
+export default combineReducers({
+    products
+})

src/reducers/products.js

@@ -0,0 +1,55 @@
+import {
+    combineReducers
+} from 'redux'
+import {
+    TEXT_CHANGE,
+    INSTOCK_CHNAGE,
+    RECEIVE_PRODUCTS
+} from '../constants/ActionTypes'
+
+const filteredProducts = (state = [], action) => {
+    switch (action.type) {
+        case TEXT_CHANGE:
+        case INSTOCK_CHNAGE:
+            // 这边执行过滤逻辑
+            return state.products.filter((product) => {
+                return product.stocked && product.name.indexOf(filterText) > -1;
+            })
+        default:
+            return state
+    }
+}
+
+const filterText = (state = '', action) => {
+    switch (action.type) {
+        case TEXT_CHANGE:
+            return action.text
+        default:
+            return state
+    }
+}
+
+const products = (state = [], action) => {
+    switch (action.type) {
+        case RECEIVE_PRODUCTS:
+            return action.products
+        default:
+            return state
+    }
+}
+
+const isInStock = (state = '', action) => {
+    switch (action.type) {
+        case INSTOCK_CHNAGE:
+            return action.isInStock
+        default:
+            return state
+    }
+}
+
+export default combineReducers({
+    filteredProducts,
+    filterText,
+    isInStock,
+    products
+})