08.Redux进阶(下)

如何使用React-redux

这里我们新建一个项目
create-react-app reactreduxdemo
在项目引入redux模块
cnpm install --save redux
编写一个基本的使用了上一章我们学过的redux的TodoList

image.png
1.引入TodoList布局

//===>src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

const App = (
    <TodoList />
);

ReactDOM.render(
  App,
  document.getElementById('root')
);

2.编写TodoList.js

//===>src/TodoList.js
import React, { Component } from "react";
import store from './store'
class TodoList extends Component {
    
    constructor(props) {
        super(props);
        this.state = store.getState()
    }

    render() {
        return (
            <div>
                <div>
                    <input value={this.state.inputValue} />
                    <button>提交</button>
                </div>
                <ul>
                    <li>Dell</li>
                </ul>
            </div>
        )
    }
}
export default TodoList;

3.编写store

//===>src/store/index.js
import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)
export default store

4.store用到的reducer

//===>src/store/reducer.js
const defaultState = {
    inputValue: 'hello world',
    list: []
}

export default (state = defaultState, action) => {
    return state
}

我们可以用npm run start命令来看下效果

效果

接下来我们要用react-redux进行改造了

使用React-redux完成TodoList功能

导入react-redux模块
npm install react-redux

Provider这个组件是react-redux提供的组件，他可以把store，通过store={store}这样把store对象向下传递进他的所有子组件中。这个demo中，TodoList组件就拥有了全局的store。

//===>src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store';

const App = (
  <Provider store={store}>
    <TodoList />
  </Provider>
);

ReactDOM.render(
  App,
  document.getElementById('root')
);

2.完善一下reducer
这个和之前一样，不过多解释了。

//===>src/store/reducer.js
const defaultState = {
    inputValue: 'hello world',
    list: []
}

export default (state = defaultState, action) => {
    if (action.type === 'change_input_value') {
        const newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }

    if (action.type === 'add_item') {
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    return state
}

3.修改TodoList
这里，因为他是个纯UI组件，所以我们用函数的声明方法，提高效率。
const { inputValue, list, changeInputValue, handleClick } = props
这句话，解构赋值。为什么能从props里结构出这些东西呢？我们看最后一行connect方法把TodoList和store连在了一起。connect方法还要传入mapStateToProps和mapDispatchToProps，这两个函数的作用是，把store的state和dispatch映射到props，这就回答了我们一开始的问题。

//===>src/TodoList.js
import React, { Component } from "react";
import { connect } from 'react-redux'

const TodoList = (props) => {

    const { inputValue, list, changeInputValue, handleClick } = props

    return (
        <div>
            <div>
                <input value={inputValue} onChange={changeInputValue} />
                <button onClick={handleClick}>提交</button>
            </div>
            <ul>
                {
                    list.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeInputValue(e) {
            const action = {
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
        },
        handleClick(e) {
            const action = {
                type: 'add_item'
            }
            dispatch(action)
        },
        handleDelete(e) {
            console.log(e);

            const action = {
                type: 'delete_item',
            }
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

image.png