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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

案例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

 

 

Redux是一个状态管理库,它通过Actions(操作)、Reducer(纯函数)和Store(单体数据容器)来组织应用的状态。Action是用于改变应用程序状态的对象,包含一个type(动作类型)和可选的数据payload。`connect`是Redux提供的高阶组件,它允许将React组件与Redux Store连接起来,以便能够访问和修改store中的状态。 使用Redux的`connect`和`dispatch`通常遵循以下步骤: 1. 首先,在Redux store里定义你的reducer,处理action并更新state。 ```js // reducers/index.js export default function reducer(state = initialState, action) { switch (action.type) { case ACTION_TYPE: return handleAction(action.payload, state); // 其他case... default: return state; } } ``` 2. 创建一个action creator,这是用于触发action的函数,通常包含一个`dispatch`调用: ```js // actions.js export function doSomething(data) { return { type: ACTION_TYPE, payload: data }; } ``` 3. 使用`connect`将组件与store连接,接收props(state和actions),并能直接dispatch actions: ```jsx // components/MyComponent.js import React from 'react'; import { connect } from 'react-redux'; import { doSomething } from './actions'; const mapStateToProps = state => ({ data: state.myData, }); const mapDispatchToProps = dispatch => ({ doSomething: () => dispatch(doSomething('some data')), }); export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); ``` 4. 组件内部,你可以通过props调用`doSomething`来更改store状态: ```jsx function MyComponent({ data, doSomething }) { return ( <button onClick={doSomething}>点击更新数据</button> <p>Data: {data}</p> ); } ``` 这只是一个基本示例,实际应用可能还会包括中间件、异步操作和派发条件等复杂情况。如果你需要更具体的代码示例,可以查阅Redux官方文档或GitHub上的教程。记得配合React和Redux Router一起使用,可以更好地管理路由和状态同步。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值