다운로드
npm install react-redux
React-Redux는 Redux용 공식 React 바인딩 라이브러리입니다. React 구성 요소가 Redux 저장소에서 데이터를 읽고 데이터를 업데이트하기 위해 저장소에 작업을 발송할 수 있습니다.React
-Redux는 모든 구성 요소를 UI 구성 요소와 컨테이너 구성 요소의 두 가지 범주로 나눕니다. UI 구성 요소는 UI 렌더링을 담당하고 컨테이너 구성 요소는 데이터 및 논리 관리를 담당합니다.
UI 구성요소: 비즈니스 로직 없이 UI 렌더링만 담당, 상태 없음(즉, 변수 this.state가 사용되지 않음), 모든 데이터는 this.props 매개변수에 의해 제공됨, Redux를 사용하지 않는 API
컨테이너 구성요소 : 관리 데이터 및 비즈니스 로직에 대한 책임, UI 렌더링에 대한 책임 없음, 내부 상태 포함, Redux를 사용하는 API.
React-Redux는 모든 UI 구성 요소는 사용자가 제공하고 컨테이너 구성 요소는 React-Redux에서 자동으로 생성한다고 규정합니다. 즉, 사용자는 시각적 계층을 담당하고 상태 관리는 모두 사용자에게 전달됩니다.
연결하다()
import React from "react";
// import store from '../store'
// 连接器
import {
connect } from 'react-redux'
import {
changeInputAction,
addItemAction,
detelclickAction
} from '../store/reducercreateor'
import {
change_input,
add_item,
dete
} from '../store/reduceType'
const todoList = (props) => {
let {
inputValue, changeHandler, clickHandler, detelclick } = props
return (
<div>
<div>
<input type="text" placeholder= {
inputValue }
onChange={
changeHandler }
value= {
inputValue }/>
<button onClick={
clickHandler}>提交</button>
</div>
<ul>
{
props?.list?.map((item,index) => {
return (
<li key={
index} onClick= {
(index) => {
detelclick(index)}}>{
item }</li>
)
})
}
</ul>
</div>
)
}
const StateToProps = (state) => {
return {
inputValue: state.inputValue,
list: state.list
}
}
const dispatchToProps = (dispatch) => {
return {
changeHandler (e) {
dispatch(changeInputAction(change_input, e.target.value))
},
clickHandler (e) {
dispatch(addItemAction(add_item, e.target.value))
},
detelclick (index) {
console.log(index)
dispatch(detelclickAction(dete, index))
}
}
}
// 映射关系
export default connect(StateToProps, dispatchToProps)(todoList)
redux에서 작성하는 방법
import {
change_input,
add_item,
dete
} from './reduceType'
const defaultState = {
inputValue: '请在输入框输入',
list: []
}
// eslint-disable-next-line import/no-anonymous-default-export
export default (state= defaultState, action) => {
console.log(state, action)
let newState = JSON.parse(JSON.stringify(state))
if (action.type === change_input) {
newState.inputValue = action.value
return newState
}
if (action.type === add_item) {
newState.list.push(newState.inputValue)
newState.inputValue = ''
return newState
}
if (action.type === dete) {
newState.list.splice(action.index, 1)
return newState
}
return state
}
reduceType.js에서 유형 선언
const change_input = 'change_input'
const add_item = 'add_item'
const dete = 'dete'
export {
change_input,
add_item,
dete
}