Redux的store、action、connect、combineReducers简单使用案例

最新推荐文章于 2023-05-21 22:47:30 发布

原创最新推荐文章于 2023-05-21 22:47:30 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在React应用中使用Redux进行状态管理，包括创建store、定义reducer、使用Provider组件以及通过connect高阶组件将状态映射到组件属性。同时，展示了具体的action和reducer实现，以及组件如何响应状态变化。

案例demo结构总截图

todoReducer是通过combineReducers()函数从store包下的reducer拆分出来，独立负责管理todo模块的数据

reducer.js：

import  {combineReducers} from 'redux';
import {createStore} from 'redux'
import TodoReducer from '../page/todo/todoReducer'


const reducer= combineReducers({
    todo: TodoReducer,
})
const store = createStore(reducer, +  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default  store;

App.js:

import React, { Component } from 'react';
import  {Provider} from  'react-redux';
import Todo from './page/todo/todo';
import  store from './store/reducer'
class App extends Component{
  render() {

    return (
        <div>
          <Provider store={store}>
            <Todo/>
          </Provider>
        </div>
    )
  }
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

action.js


export const buttonClickAction = () => ({
    type: 'BUTTON_CLICK',
    value: false
})

export const changeTextAction = () => ({
    type: 'CHANGE_TEXT',
    value: false
})

todo.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from './actions';
//定义组件
class Todo extends Component{
    render() {
        const {text, onChangeText, onButtonClick} = this.props;
        return (
            <div>
                <h1 onClick={onChangeText}> {text} </h1>
                <button onClick={onButtonClick}>click me</button>
            </div>
        );
    }
}

const mapState = (state) => ({
     text: state.todo.text
})
const mapDispatch =(dispatch) =>({
     onButtonClick(){
            dispatch(actions.buttonClickAction())
        },
    onChangeText(){
        dispatch(actions.changeTextAction())
    }
})

export default connect(mapState,  mapDispatch)(Todo);

todoReducer.js


const initialState = {
    text: 'Hello'
}
const TodoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_TEXT':
            return {
                text: state.text==='Hello' ? 'hello变为hi':'Hello'
            }
        case 'BUTTON_CLICK':
            return {
                text: state.text==='Hello' ? '按钮被点击':'Hello'
            }
        default:
            return initialState;
    }
}
export default TodoReducer