(перейдите к разделу "Файл Query Reducer", чтобы разобраться в этом вопросе.)
Я нахожусь на ранних стадиях разработки построителя электронной почты.Основная функциональность, которую я пытаюсь написать прямо сейчас, заключается в том, что по щелчку приложение берет предварительно подготовленные строки и встраивает их в заранее созданную структуру, чтобы создать модуль, а затем я позже отредактирую законченный модуль вDOM.
Я строю его так, чтобы строки, внедренные в структуру при отображении модуля в DOM, определялись состоянием строки запроса.
Строка запроса будет построенакнопками, которые будут соответствовать объектам в массиве, хранящем компоненты строки (реагирующие компоненты).
Тогда все, что мне нужно сделать, это вставить состояние строки запроса в структуры.
Этот этаппочти готов, но я не уверен, как связать редуктор строки запроса, чтобы объединить полезную нагрузку с идентификаторами массива строк.
Файл приложения
Импортируется, подключается к хранилищу и отображается в DOM в файле индекса. Основная часть, которую нужно убрать, заключается в том, что кнопка отправляет параметр queryAction
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { queryAction } from './store/actions/queryAction.js';
const mapStateToProps = (state) => {
return {
queryString: state.queryReducer
}
}
const matchDispatchToProps = (dispatch) => {
return bindActionCreators({ queryAction: queryAction }, dispatch)
}
class App extends React.Component {
render() {
const { queryString } = this.props;
return (
<div className="App">
{console.log('stored query string = ' + queryString)}
<button onClick={() => this.props.queryAction('1')}> Dispatch query string </button>
</div>
)
}
}
export default connect(mapStateToProps, matchDispatchToProps)(App);
Файл действия запроса
Перемещает параметр для соответствующего редуктора (queryReducer)
export const queryAction = (i) => {
console.log('/action');
console.log('payload = '+ i);
return {
type: 'UPDATE_QUERY',
payload: i
}
};
Файл редуктора строк
Здесьимпортированные компоненты head, body, btn и img - это JSX-компоненты электронной почты, которые я использую для создания массива, который я могу вызвать.
import React from 'react';
import { Head, Body, Btn, Img } from '../../rows.js';
const initState = {
rows: [
{ 'row': <Img /> },
{ 'row': <Body /> },
{ 'row': <Btn /> },
{ 'row': <Head /> }
]
}
const rowReducer = (state = initState, action) => {
return state;
}
export default rowReducer;
Файл Query Reducer
И здесь я встречаюсь со своим соответствием.
Я могу обновить initState с полезной нагрузкой, это достаточно просто.Но я не могу понять, как использовать полезную нагрузку, чтобы сначала индексировать массив строк, а затем обновлять состояние с помощью извлеченного объекта массива.Конечная точка этого состоит в том, что для каждой доставленной полезной нагрузки извлеченный объект массива добавляется в конец последнего.Таким образом, создается новый настраиваемый массив.
Тогда мне нужно только внедрить массив в структуры.Тогда всякий раз, когда структура вызывается.Пользователь уже определил, какие строки он хотел бы видеть в структуре, и завершенный модуль будет отображен.
const initState = ''
const queryReducer = (state = initState, action) => {
switch(action.type){
case 'UPDATE_QUERY':
console.log('/reducer');
return action.payload
}
return state;
}
export default queryReducer
### Просто добавьте, что вам нужноувидеть это ###
Вот как выглядит индексный файл, корневой редуктор и один из структурных файлов.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import rootReducer from './store/reducers/rootReducer.js';
import * as serviceWorker from './serviceWorker';
const store = createStore(rootReducer);
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
serviceWorker.unregister();
Корневой редуктор
import {combineReducers} from 'redux'
import rowReducer from './rowReducer.js'
import queryReducer from './queryReducer.js'
const rootReducer = combineReducers({
rowReducer: rowReducer,
queryReducer: queryReducer
});
export default rootReducer
Структура из одного столбца (не обращайте внимания на индексацию в массиве строк.)
import React from 'react';
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
return {
rows: state.rowReducer.rows
}
}
class Single extends React.Component {
render() {
const { rows } = this.props;
return (
<div style={{ fontSize: 0, lineHeight: 0 }}>
<table id="Table1" cellSpacing={0} cellPadding={0} border={0} width="100%">
<tbody>
<tr>
<td valign="top" align="center" style={{ borderCollapse: 'collapse', borderWidth: 0 }} bgcolor="#D9E1E2">
<table className="Table2" bgcolor="#FFFFFF" cellSpacing={0} cellPadding={0} border={0} width={680}>
<tbody>
<tr>
<td style={{ paddingTop: 24, paddingBottom: 24 }} align="center">
<table className="Table3" align="center" cellSpacing={0} cellPadding={0} border={0} width={604}>
{rows[1].row}
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
)
}
}
export default connect(mapStateToProps)(Single);