React中Redux通过action对stroe进行修改

﹏ヽ暗。殇╰゛Y 2023-03-06 05:11 10阅读 0赞

一、目录结构

src|
    		store|
    				index.js
    				reducer.js
    		Home.js

二、Home.js中：

constructor(props){ 
    		super(props);
    
    		this.state = store.getState();
    
    		store.subscribe(this.changeStateStr.bind(this))
    	//监听是否有action提交，若有则触发括号中的函数
    	}
    	render () { 
    		return (
    			<div>
    				<h1>数据：{ this.state.str}</h1>
    				<button
    					onClick={ this.changeStr.bind(this)}
    				>——————修改数据——————</button>
    		  		<button onClick={ this.toNews.bind(this)}>新闻</button>
    			</div>
    		)
    	}
    	changeStr(){ 
    		let action ={ 
    			type:"change_str"
    			//提交说明，用于reducer.js中的switch来区分action
    		}
    		store.dispatch(action);
    		//提交action
    	}
    	changeStateStr(){ 
    		this.setState(store.getState())
    		//将this.state与store中的数据同步
    	}

三、reducer.js中

let dataState = { 
    	str:"==这是仓库中的数据=="
    }
    export default (state=dataState,action)=>{ 
    	let newState = state;
    	switch(action.type){ 
    		case "change_str":
    		//当action.type为change_str
    			newState.str=11111;
    			return newState;
    		break;
    		default:
    			return state;
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关一个用于对react&redux（包含saga）项目进行赖加载的工具fay-react-redux-loadabe

GitHub:fay-react-redux-loadable][GitHub_fay-react-redux-loadable] [npm:@fay-react/r...

傷城~/ 2024年04月18日 18:58/ 0 赞/ 20 阅读

相关 React【Redux简介、什么时候使用Redux、Redux 库和工具、单向数据流、Redux Action、Redux Reducer、Redux Store】(十)

![5cf10194cb164aeb849319fb6864f88b.gif][] 文章目录 Redux简介什么时候使用Redux Redux 库和工具单向

太过爱你忘了你带给我的痛/ 2024年02月19日 10:40/ 0 赞/ 68 阅读

相关 React中Redux通过action对stroe进行修改

一、目录结构 src| store| index.js reducer.js Home.js 二、Home.

﹏ヽ暗。殇╰゛Y/ 2023年03月06日 05:11/ 0 赞/ 11 阅读

相关 2 redux Action

Action action是一个对象（object），表示一个任务的描述如下：添加新 todo 任务的 action 是这样的： const ADD\_TODO =

青旅半醒/ 2023年02月27日 15:56/ 0 赞/ 47 阅读

相关 Redux之redux-actions的使用

1：作用：当我们的在开发大型应用的时候，对于大量的action，我们的reducer需要些大量的swich来对action.type进行判断。 redux

快来打我*/ 2022年05月20日 09:04/ 0 赞/ 363 阅读

相关 React - 简单理解Redux的action reducer store

什么是store，如图 ![20181122133223158.png][] 这就是一个store,我们可以看到由dispatcher reducer state构成，不

不念不忘少年蓝@/ 2022年04月15日 05:59/ 0 赞/ 295 阅读

相关 react redux

在react中使用redux入门。基本的例子使用redux管理react的状态。 <!DOCTYPE html> <html> <head>

亦凉/ 2022年02月19日 00:39/ 0 赞/ 275 阅读

相关 react redux redux-saga

react是前端view框架 redux是前端状态管理器 redux-saga是redux的升级版，异步状态管理 `saga.js`管理异步状态变更，一般是

柔光的暖阳◎/ 2022年02月18日 11:11/ 0 赞/ 329 阅读

相关 react redux

redux store:数据仓库,保存数据的地方 state:一个对象,数据库里的所有数据都放到一个state action:一

爱被打了一巴掌/ 2021年07月25日 02:30/ 0 赞/ 482 阅读

相关 react react-redux

react-redux 和redux一样效果,不同实现安装 cnpm install react-redux --save

蔚落/ 2021年07月24日 16:29/ 0 赞/ 498 阅读